6 | routes: RouteRecordNormalized[]
7 | // router: Router | null
8 | }
9 |
--------------------------------------------------------------------------------
/packages/devtools-kit/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig({
4 | entryPoints: [
5 | 'src/index.ts',
6 | ],
7 | noExternal: ['speakingurl', 'superjson'],
8 | clean: true,
9 | format: ['esm', 'cjs'],
10 | dts: true,
11 | shims: true,
12 | })
13 |
--------------------------------------------------------------------------------
/packages/devtools-kit/types.d.ts:
--------------------------------------------------------------------------------
1 | /// Vue DevTools
5 |
23 |
30 |
31 |
Loading DevTools Client...
32 |
33 |
5 | Vue.js is detected on this page.
8 |
--------------------------------------------------------------------------------
/packages/firefox-extension/popups/disabled.nuxt.html:
--------------------------------------------------------------------------------
1 |
5 | Nuxt + Vue.js is detected on this page.
8 |
--------------------------------------------------------------------------------
/packages/firefox-extension/popups/disabled.vitepress.html:
--------------------------------------------------------------------------------
1 |
5 | VitePress + Vue.js is detected on this page.
8 |
--------------------------------------------------------------------------------
/packages/firefox-extension/popups/enabled.html:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Vue.js is detected on this page.
14 |
15 |
16 | Troubleshooting
17 |
18 |
19 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Nuxt + Vue.js is detected on this page.
14 |
15 |
16 | Troubleshooting
17 |
18 |
19 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | VitePress + Vue.js is detected on this page.
14 |
15 |
16 | Troubleshooting
17 |
18 |
19 |
5 | Vue.js not detected
6 |
7 |
--------------------------------------------------------------------------------
/packages/firefox-extension/popups/popup.css:
--------------------------------------------------------------------------------
1 | @import url('https://fonts.googleapis.com/css?family=Roboto:300,400,400i,700,700i');
2 |
3 | body {
4 | font-family: Roboto, Avenir, Helvetica, Arial, sans-serif;
5 | font-size: 14px;
6 | font-weight: 400;
7 | line-height: 1.4;
8 | padding: 18px 24px;
9 | color: #2c3e50;
10 | }
11 |
12 | body,
13 | p {
14 | margin: 0;
15 | }
16 |
17 | p {
18 | min-width: 200px;
19 | max-width: 300px;
20 | }
21 |
22 | .short-paragraph {
23 | min-width: initial;
24 | white-space: nowrap;
25 | }
26 |
27 | a {
28 | color: #42b983;
29 | }
30 |
31 | .flex {
32 | display: flex;
33 | align-items: center;
34 | }
35 |
36 | .screenshot {
37 | position: relative;
38 | }
39 |
40 | .screenshot > img {
41 | width: 140px;
42 | height: 140px;
43 | object-fit: cover;
44 | border-radius: 100%;
45 | margin-right: 24px;
46 | box-shadow: 0 0 15px rgb(0 0 0 / 10%);
47 | }
48 |
49 | .migration-guide {
50 | width: 300px;
51 | margin: 0;
52 | padding: 0;
53 | }
54 |
55 | .migration-guide h2 {
56 | padding: 8px 0;
57 | margin: 0;
58 | }
59 |
--------------------------------------------------------------------------------
/packages/firefox-extension/popups/vue2-migration-guide.html:
--------------------------------------------------------------------------------
1 |
5 |
Migration Tips
6 |
7 | Vue DevTools v7 detected in your Vue2 project. v7 only supports Vue3 and will not work.
8 |
9 |
10 | The legacy version that supports both Vue 2 and Vue 3 has been moved to
11 | here , please install and enable only the legacy version for your Vue2 app. If you're still using v5 version, you can
14 | install it
15 | here .
20 |
21 |
Vue DevTools Client
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/overlay/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue/devtools-overlay",
3 | "type": "module",
4 | "version": "7.7.6",
5 | "private": true,
6 | "author": "webfansplz",
7 | "license": "MIT",
8 | "exports": {
9 | "./*": "./dist/*"
10 | },
11 | "files": [
12 | "dist"
13 | ],
14 | "engines": {
15 | "node": ">=v14.21.3"
16 | },
17 | "scripts": {
18 | "build": "vite build",
19 | "play": "vite --config vite.play.config.ts --open",
20 | "stub": "vite build --watch"
21 | },
22 | "dependencies": {
23 | "@vue/devtools-core": "workspace:^",
24 | "@vue/devtools-kit": "workspace:*",
25 | "@vue/devtools-shared": "workspace:^",
26 | "@vue/devtools-ui": "workspace:*",
27 | "@vueuse/core": "catalog:"
28 | },
29 | "devDependencies": {
30 | "@iconify/json": "catalog:",
31 | "@types/node": "catalog:",
32 | "@vitejs/plugin-vue": "catalog:",
33 | "sass-embedded": "catalog:",
34 | "vite": "catalog:",
35 | "vue": "catalog:"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/packages/overlay/src/composables/iframe.ts:
--------------------------------------------------------------------------------
1 | import { ref } from 'vue'
2 |
3 | export function useIframe(clientUrl: string, onLoad: () => void) {
4 | const iframe = ref()
5 | function getIframe() {
6 | if (iframe.value)
7 | return iframe.value
8 | iframe.value = document.createElement('iframe')
9 | iframe.value.id = 'vue-devtools-iframe'
10 | iframe.value.src = clientUrl
11 | iframe.value.setAttribute('data-v-inspector-ignore', 'true')
12 | iframe.value.onload = onLoad
13 | return iframe.value
14 | }
15 |
16 | return {
17 | getIframe,
18 | iframe,
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/overlay/src/composables/index.ts:
--------------------------------------------------------------------------------
1 | export * from './iframe'
2 | export * from './panel'
3 | export * from './position'
4 | export * from './state'
5 |
--------------------------------------------------------------------------------
/packages/overlay/src/constants/index.ts:
--------------------------------------------------------------------------------
1 | // ---- state ----
2 | export const PANEL_PADDING = 10
3 | export const PANEL_MIN = 20
4 | export const PANEL_MAX = 100
5 |
--------------------------------------------------------------------------------
/packages/overlay/src/main.ts:
--------------------------------------------------------------------------------
1 | import type { Component } from 'vue'
2 | import { createApp, h } from 'vue'
3 |
4 | import App from './App.vue'
5 |
6 | function createDevToolsContainer(App: Component) {
7 | const CONTAINER_ID = '__vue-devtools-container__'
8 | const el = document.createElement('div')
9 | el.setAttribute('id', CONTAINER_ID)
10 | el.setAttribute('data-v-inspector-ignore', 'true')
11 | document.getElementsByTagName('body')[0].appendChild(el)
12 | const app = createApp({
13 | render: () => h(App),
14 | devtools: {
15 | hide: true,
16 | },
17 | })
18 | app.mount(el)
19 | }
20 |
21 | createDevToolsContainer(App)
22 |
--------------------------------------------------------------------------------
/packages/overlay/src/utils/index.ts:
--------------------------------------------------------------------------------
1 | export function clamp(value: number, min: number, max: number) {
2 | return Math.min(Math.max(value, min), max)
3 | }
4 |
5 | export const checkIsSafari = () => navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')
6 |
7 | export function pixelToNumber(value: string | number) {
8 | if (typeof value === 'string')
9 | return value.endsWith('px') ? +value.slice(0, -2) : +value
10 | return value
11 | }
12 |
--------------------------------------------------------------------------------
/packages/overlay/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../../tsconfig.json",
3 | "compilerOptions": {
4 | "target": "esnext",
5 | "lib": ["esnext", "dom"],
6 | "module": "esnext",
7 | "paths": {
8 | "~/*": ["./src/*"]
9 | }
10 | },
11 | "include": ["**/*.ts", "**/*.d.ts", "**/*.vue"]
12 | }
13 |
--------------------------------------------------------------------------------
/packages/playground/applet/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vue DevTools Basic Playground
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/playground/applet/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground-applet",
3 | "type": "module",
4 | "version": "7.3.2",
5 | "private": true,
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "@iconify/json": "catalog:",
11 | "@tresjs/core": "^4.3.3",
12 | "@vueuse/core": "catalog:",
13 | "pinia": "catalog:",
14 | "three": "^0.175.0",
15 | "unplugin-auto-import": "catalog:",
16 | "vue": "catalog:",
17 | "vue-router": "catalog:"
18 | },
19 | "devDependencies": {
20 | "@types/three": "^0.175.0",
21 | "@vitejs/plugin-vue": "catalog:",
22 | "@vue/devtools-applet": "workspace:*",
23 | "@vue/devtools-core": "workspace:*",
24 | "@vue/devtools-kit": "workspace:*",
25 | "@vue/devtools-shared": "workspace:*",
26 | "sass-embedded": "catalog:",
27 | "serve": "catalog:",
28 | "typescript": "catalog:",
29 | "unocss": "catalog:",
30 | "vite": "catalog:",
31 | "vite-plugin-inspect": "catalog:",
32 | "vite-plugin-vue-devtools": "workspace:*"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/playground/applet/public/color-scheme.js:
--------------------------------------------------------------------------------
1 | (function () {
2 | const prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
3 | const setting = localStorage.getItem('color-schema') || 'auto'
4 | if (setting === 'dark' || (prefersDark && setting !== 'light'))
5 | document.documentElement.classList.toggle('dark', true)
6 | })()
7 |
--------------------------------------------------------------------------------
/packages/playground/applet/src/components/Foo.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Foo Component {{ msg }}
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/playground/applet/src/components/Hello.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | Hello Component
8 |
10 |
11 |
--------------------------------------------------------------------------------
/packages/playground/applet/src/main.ts:
--------------------------------------------------------------------------------
1 | import Tres from '@tresjs/core'
2 | import { createPinia } from 'pinia'
3 | import App from './App.vue'
4 | import './style.css'
5 | import 'uno.css'
6 | import '@vue/devtools-applet/style.css'
7 |
8 | const pinia = createPinia()
9 | const app = createApp(App)
10 | app.use(pinia)
11 |
12 | app.use(Tres)
13 | app.mount('#app')
14 |
--------------------------------------------------------------------------------
/packages/playground/applet/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3 | font-size: 16px;
4 | line-height: 24px;
5 | font-weight: 400;
6 |
7 | /* color-scheme: light dark; */
8 | /* color: rgba(255, 255, 255, 0.87); */
9 | /* background-color: #242424; */
10 |
11 | font-synthesis: none;
12 | text-rendering: optimizeLegibility;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | -webkit-text-size-adjust: 100%;
16 | }
17 |
18 | html {
19 | --at-apply: font-sans;
20 | overflow-y: scroll;
21 | overscroll-behavior: none;
22 | -ms-overflow-style: none; /* IE and Edge */
23 | scrollbar-width: none; /* Firefox */
24 | }
25 |
26 | html.dark {
27 | color-scheme: dark;
28 | }
29 |
30 | body {
31 | font-size: 16px;
32 | /* font-family: 'Roboto Mono, Menlo, Consolas, monospace'; */
33 | }
34 |
--------------------------------------------------------------------------------
/packages/playground/applet/uno.config.ts:
--------------------------------------------------------------------------------
1 | import {
2 | defineConfig,
3 | presetAttributify,
4 | presetIcons,
5 | presetTypography,
6 | presetUno,
7 | transformerDirectives,
8 | transformerVariantGroup,
9 | } from 'unocss'
10 |
11 | export default defineConfig({
12 | presets: [
13 | presetUno(),
14 | presetAttributify(),
15 | presetTypography(),
16 | presetIcons({
17 | prefix: ['i-', ''],
18 | collections: {},
19 | scale: 1.2,
20 | }),
21 | ],
22 | transformers: [
23 | transformerDirectives(),
24 | transformerVariantGroup(),
25 | ],
26 | })
27 |
--------------------------------------------------------------------------------
/packages/playground/applet/vite.config.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue'
2 | import Unocss from 'unocss/vite'
3 |
4 | import AutoImport from 'unplugin-auto-import/vite'
5 | import { defineConfig } from 'vite'
6 | import VueDevtools from 'vite-plugin-vue-devtools'
7 |
8 | // https://vitejs.dev/config/
9 | export default defineConfig({
10 | plugins: [
11 | vue(),
12 | VueDevtools(),
13 | Unocss(),
14 | AutoImport({
15 | imports: [
16 | 'vue',
17 | 'vue-router',
18 | '@vueuse/core',
19 | ],
20 | ignore: ['h'],
21 | }),
22 | ],
23 | css: {
24 | preprocessorOptions: {
25 | scss: {
26 | api: 'modern-compiler',
27 | },
28 | },
29 | },
30 | server: {
31 | port: 3000,
32 | },
33 | })
34 |
--------------------------------------------------------------------------------
/packages/playground/basic/assets/asset-in-root-assets.md:
--------------------------------------------------------------------------------
1 | # asset-in-root-assets
2 |
--------------------------------------------------------------------------------
/packages/playground/basic/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vue DevTools Basic Playground
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/playground/basic/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground-basic",
3 | "type": "module",
4 | "version": "7.3.2",
5 | "private": true,
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "@tanstack/vue-query": "^5.70.0",
11 | "@vueuse/core": "catalog:",
12 | "element-plus": "^2.9.7",
13 | "pinia": "catalog:",
14 | "unplugin-auto-import": "catalog:",
15 | "vee-validate": "^4.15.0",
16 | "vue": "catalog:",
17 | "vue-router": "catalog:",
18 | "vuex": "^4.1.0"
19 | },
20 | "devDependencies": {
21 | "@rollup/plugin-commonjs": "^28.0.3",
22 | "@tanstack/vue-query-devtools": "^5.70.0",
23 | "@vitejs/plugin-vue": "catalog:",
24 | "@vue/devtools": "workspace:^",
25 | "sass-embedded": "catalog:",
26 | "serve": "catalog:",
27 | "typescript": "catalog:",
28 | "unocss": "catalog:",
29 | "vite": "catalog:",
30 | "vite-plugin-inspect": "catalog:",
31 | "vite-plugin-vue-devtools": "workspace:*"
32 | }
33 | }
34 |
--------------------------------------------------------------------------------
/packages/playground/basic/public/assets/asset-in-public-assets.md:
--------------------------------------------------------------------------------
1 | # asset-in-public-assets
2 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/App.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 |
11 | Router Navgation:
12 |
13 |
14 | /
15 |
16 |
17 | |
18 |
19 |
20 | /hello
21 |
22 |
23 | |
24 |
25 |
26 | /hey/123123
27 |
28 |
29 | |
30 |
31 |
32 | Prop mutation
33 |
34 |
35 |
36 |
38 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/components/DynamicApp.vue:
--------------------------------------------------------------------------------
1 |
24 |
25 |
26 |
27 |
28 | Register App
29 |
30 |
31 | Remove App
32 |
33 |
34 |
36 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/components/Foo.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ text }} Component
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/components/IndexComponent/index.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ text }} Component
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/components/PropChild.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
bool: {{ props.bool }}
13 |
num: {{ props.num }}
14 |
str: {{ props.str }}
15 |
obj: {{ props.obj }}
16 |
18 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/pages/CircularState.vue:
--------------------------------------------------------------------------------
1 |
26 |
27 |
28 |
29 |
30 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/pages/Hello.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 | Hello {{ app.count }}
11 |
12 | Increment count
13 |
14 |
15 |
16 | DynamicApp:
18 |
20 |
21 |
29 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/pages/Hey.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 | Hey: {{ route.params.id }}
14 | Counter: {{ counterStore.count }}
15 |
16 | Vuex counter: {{ vuexStore.state.counter }}
17 |
18 | Mutation:Increase
19 |
20 |
21 | Action:Double Increase
22 |
23 |
24 |
26 |
27 |
35 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/pages/IntervalUpdate.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | This is {{ str }} time!
14 |
16 |
17 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/pages/PropMutation.vue:
--------------------------------------------------------------------------------
1 |
13 |
14 |
15 |
26 |
27 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/pages/VeeValidate.vue:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 |
33 |
34 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/stores/index.ts:
--------------------------------------------------------------------------------
1 | import { defineStore } from 'pinia'
2 | import { computed, ref } from 'vue'
3 |
4 | export const useAppStore = defineStore('app', () => {
5 | const count = ref(120)
6 | const map = ref(new Map([['a', 1], ['b', 2], ['c.test', 3]]))
7 | const set = ref(new Set([1, 2, 3]))
8 | const obj = ref({ 'foo.test': 1 })
9 | function increment() {
10 | count.value++
11 | }
12 | const doubledCount = computed(() => count.value * 2)
13 |
14 | return { count, doubledCount, increment, map, set, obj }
15 | })
16 |
17 | export const useCounterStore = defineStore('counter', () => {
18 | const count = ref(10)
19 | const name = ref('webfansplz!!!')
20 | function increment() {
21 | count.value++
22 | }
23 |
24 | return { count, name, increment }
25 | })
26 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/stores/vuexStore.ts:
--------------------------------------------------------------------------------
1 | import { createStore } from 'vuex'
2 |
3 | export default createStore({
4 | state: {
5 | counter: 0,
6 | },
7 | mutations: {
8 | increment(state) {
9 | state.counter++
10 | },
11 | },
12 | actions: {
13 | doubleIncrement({ commit }) {
14 | commit('increment')
15 | commit('increment')
16 | },
17 | },
18 | modules: {
19 | namespacedModule: {
20 | namespaced: true,
21 | state: () => ({
22 | value: 'Hello, Vuex',
23 | }),
24 | getters: {
25 | exclamation(state) {
26 | return `${state.value}!!!!!!!`
27 | },
28 | },
29 | modules: {
30 | unnamespacedModule: {
31 | state: () => ({
32 | value: 'unnamespacedModule',
33 | }),
34 | },
35 | },
36 | },
37 | },
38 | })
39 |
--------------------------------------------------------------------------------
/packages/playground/basic/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3 | font-size: 16px;
4 | line-height: 24px;
5 | font-weight: 400;
6 |
7 | color-scheme: light dark;
8 | color: rgba(255, 255, 255, 0.87);
9 | background-color: #242424;
10 |
11 | font-synthesis: none;
12 | text-rendering: optimizeLegibility;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | -webkit-text-size-adjust: 100%;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/playground/basic/uno.config.ts:
--------------------------------------------------------------------------------
1 | import {
2 | defineConfig,
3 | presetAttributify,
4 | presetTypography,
5 | presetUno,
6 | transformerDirectives,
7 | transformerVariantGroup,
8 | } from 'unocss'
9 |
10 | export default defineConfig({
11 | presets: [
12 | presetUno(),
13 | presetAttributify(),
14 | presetTypography(),
15 | ],
16 | transformers: [
17 | transformerDirectives(),
18 | transformerVariantGroup(),
19 | ],
20 | })
21 |
--------------------------------------------------------------------------------
/packages/playground/basic/vite.config.ts:
--------------------------------------------------------------------------------
1 | import commonjs from '@rollup/plugin-commonjs'
2 | import vue from '@vitejs/plugin-vue'
3 | import Unocss from 'unocss/vite'
4 | import AutoImport from 'unplugin-auto-import/vite'
5 | import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
6 | import { defineConfig } from 'vite'
7 | import inspect from 'vite-plugin-inspect'
8 | import VueDevTools from 'vite-plugin-vue-devtools'
9 | // https://vitejs.dev/config/
10 | export default defineConfig({
11 | css: {
12 | preprocessorOptions: {
13 | scss: {
14 | api: 'modern-compiler',
15 | },
16 | },
17 | },
18 | plugins: [
19 | vue(),
20 | commonjs(),
21 | VueDevTools({
22 | // launchEditor: 'code',
23 | }),
24 | Unocss(),
25 | AutoImport({
26 | imports: [
27 | 'vue',
28 | 'vue-router',
29 | '@vueuse/core',
30 | ],
31 | resolvers: [ElementPlusResolver()],
32 | }),
33 | inspect(),
34 | ],
35 | server: {
36 | port: 3000,
37 | },
38 | })
39 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vue DevTools Basic Playground
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground-multi-app",
3 | "type": "module",
4 | "version": "7.3.2",
5 | "private": true,
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "@vueuse/core": "catalog:",
11 | "pinia": "catalog:",
12 | "unplugin-auto-import": "catalog:",
13 | "vue": "catalog:",
14 | "vue-router": "catalog:"
15 | },
16 | "devDependencies": {
17 | "@vitejs/plugin-vue": "catalog:",
18 | "sass-embedded": "catalog:",
19 | "serve": "catalog:",
20 | "typescript": "catalog:",
21 | "unocss": "catalog:",
22 | "vite": "catalog:",
23 | "vite-plugin-inspect": "catalog:",
24 | "vite-plugin-vue-devtools": "workspace:*"
25 | }
26 | }
27 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/src/App.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | App
10 |
Count:
11 |
12 | ++
13 |
14 |
16 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/src/App2.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | App2
10 |
Count:
11 |
12 | ++
13 |
14 |
16 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/src/components/Number.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 | {{ num }}
8 |
9 |
10 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 |
3 | import App2 from './App2.vue'
4 | import App from './App.vue'
5 |
6 | import './style.css'
7 | import 'uno.css'
8 |
9 | const app = createApp(App)
10 |
11 | const app2 = createApp(App2)
12 |
13 | app.mount('#app')
14 |
15 | app2.mount('#app2')
16 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3 | font-size: 16px;
4 | line-height: 24px;
5 | font-weight: 400;
6 |
7 | color-scheme: light dark;
8 | color: rgba(255, 255, 255, 0.87);
9 | background-color: #242424;
10 |
11 | font-synthesis: none;
12 | text-rendering: optimizeLegibility;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | -webkit-text-size-adjust: 100%;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/uno.config.ts:
--------------------------------------------------------------------------------
1 | import {
2 | defineConfig,
3 | presetAttributify,
4 | presetTypography,
5 | presetUno,
6 | transformerDirectives,
7 | transformerVariantGroup,
8 | } from 'unocss'
9 |
10 | export default defineConfig({
11 | presets: [
12 | presetUno(),
13 | presetAttributify(),
14 | presetTypography(),
15 | ],
16 | transformers: [
17 | transformerDirectives(),
18 | transformerVariantGroup(),
19 | ],
20 | })
21 |
--------------------------------------------------------------------------------
/packages/playground/multi-app/vite.config.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue'
2 | import Unocss from 'unocss/vite'
3 |
4 | import AutoImport from 'unplugin-auto-import/vite'
5 | import { defineConfig } from 'vite'
6 | import VueDevtools from 'vite-plugin-vue-devtools'
7 |
8 | // https://vitejs.dev/config/
9 | export default defineConfig({
10 | css: {
11 | preprocessorOptions: {
12 | scss: {
13 | api: 'modern-compiler',
14 | },
15 | },
16 | },
17 | plugins: [
18 | vue(),
19 | VueDevtools(),
20 | Unocss(),
21 | AutoImport({
22 | imports: [
23 | 'vue',
24 | 'vue-router',
25 | '@vueuse/core',
26 | ],
27 | }),
28 | ],
29 | server: {
30 | port: 3001,
31 | },
32 | })
33 |
--------------------------------------------------------------------------------
/packages/playground/options-api/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vue DevTools Basic Playground
8 |
9 |
14 |
15 |
16 |
17 |
18 |
19 |
--------------------------------------------------------------------------------
/packages/playground/options-api/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground-options-api",
3 | "type": "module",
4 | "version": "7.3.2",
5 | "private": true,
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "vue": "catalog:"
11 | },
12 | "devDependencies": {
13 | "@vitejs/plugin-vue": "catalog:",
14 | "vite-plugin-vue-devtools": "workspace:*"
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/playground/options-api/src/App.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/playground/options-api/src/Options.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
13 | Options: {{ name }}
14 |
15 |
16 |
--------------------------------------------------------------------------------
/packages/playground/options-api/src/Setup.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 | Setup: {{ name }}
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/playground/options-api/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 |
4 | createApp(App).mount('#app')
5 |
--------------------------------------------------------------------------------
/packages/playground/options-api/src/style.css:
--------------------------------------------------------------------------------
1 | :root {
2 | font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
3 | font-size: 16px;
4 | line-height: 24px;
5 | font-weight: 400;
6 |
7 | color-scheme: light dark;
8 | color: rgba(255, 255, 255, 0.87);
9 | background-color: #242424;
10 |
11 | font-synthesis: none;
12 | text-rendering: optimizeLegibility;
13 | -webkit-font-smoothing: antialiased;
14 | -moz-osx-font-smoothing: grayscale;
15 | -webkit-text-size-adjust: 100%;
16 | }
17 |
--------------------------------------------------------------------------------
/packages/playground/options-api/uno.config.ts:
--------------------------------------------------------------------------------
1 | import {
2 | defineConfig,
3 | presetAttributify,
4 | presetTypography,
5 | presetUno,
6 | transformerDirectives,
7 | transformerVariantGroup,
8 | } from 'unocss'
9 |
10 | export default defineConfig({
11 | presets: [
12 | presetUno(),
13 | presetAttributify(),
14 | presetTypography(),
15 | ],
16 | transformers: [
17 | transformerDirectives(),
18 | transformerVariantGroup(),
19 | ],
20 | })
21 |
--------------------------------------------------------------------------------
/packages/playground/options-api/vite.config.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue'
2 | import { defineConfig } from 'vite'
3 | import VueDevTools from 'vite-plugin-vue-devtools'
4 |
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | vue(),
9 | VueDevTools({
10 | launchEditor: 'code',
11 | }),
12 | ],
13 | server: {
14 | port: 3000,
15 | },
16 | })
17 |
--------------------------------------------------------------------------------
/packages/playground/plugin-sfc/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Vue DevTools Plugin-SFC Playground
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/playground/plugin-sfc/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "playground-plugin-sfc",
3 | "type": "module",
4 | "version": "7.3.2",
5 | "private": true,
6 | "scripts": {
7 | "dev": "vite"
8 | },
9 | "dependencies": {
10 | "vue": "catalog:"
11 | },
12 | "devDependencies": {
13 | "@vitejs/plugin-vue": "catalog:",
14 | "@vue/devtools": "workspace:^",
15 | "typescript": "catalog:",
16 | "vite": "catalog:",
17 | "vite-plugin-inspect": "catalog:",
18 | "vite-plugin-vue-devtools": "workspace:*"
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/playground/plugin-sfc/src/App.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
--------------------------------------------------------------------------------
/packages/playground/plugin-sfc/src/count.vue:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
9 |
10 | count is {{ count }}
11 |
12 |
13 | increment
14 |
15 |
17 |
18 |
28 |
--------------------------------------------------------------------------------
/packages/playground/plugin-sfc/src/main.ts:
--------------------------------------------------------------------------------
1 | import { addCustomTab } from '@vue/devtools-kit'
2 | import { createApp } from 'vue'
3 | import App from './App.vue'
4 | import countSFC from './count.vue?raw'
5 |
6 | const app = createApp(App)
7 | app.mount('#app')
8 |
9 | setTimeout(() => {
10 | addCustomTab({
11 | name: 'plugin_count',
12 | title: 'Plugin Count',
13 | icon: 'baseline-exposure-plus-1',
14 | view: {
15 | type: 'sfc',
16 | sfc: countSFC,
17 | },
18 | category: 'app',
19 | })
20 | }, 2000)
21 |
--------------------------------------------------------------------------------
/packages/playground/plugin-sfc/vite.config.ts:
--------------------------------------------------------------------------------
1 | import vue from '@vitejs/plugin-vue'
2 | import { defineConfig } from 'vite'
3 | import inspect from 'vite-plugin-inspect'
4 | import VueDevTools from 'vite-plugin-vue-devtools'
5 | // https://vitejs.dev/config/
6 | export default defineConfig({
7 | plugins: [
8 | vue(),
9 | VueDevTools(),
10 | inspect(),
11 | ],
12 | server: {
13 | port: 3000,
14 | },
15 | })
16 |
--------------------------------------------------------------------------------
/packages/playground/ui/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | UI Playground
8 |
9 |
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/playground/ui/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ui-playground",
3 | "type": "module",
4 | "version": "7.3.2",
5 | "private": true,
6 | "scripts": {
7 | "build:ui-playground": "vue-tsc && vite build",
8 | "dev": "vite",
9 | "preview": "vite preview"
10 | },
11 | "dependencies": {
12 | "@unocss/reset": "catalog:",
13 | "@vue/devtools-ui": "workspace:*",
14 | "@vueuse/core": "catalog:",
15 | "vue": "catalog:"
16 | },
17 | "devDependencies": {
18 | "@vitejs/plugin-vue": "catalog:",
19 | "typescript": "catalog:",
20 | "unocss": "catalog:",
21 | "vite": "catalog:",
22 | "vue-tsc": "^2.2.8"
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/playground/ui/src/App.vue:
--------------------------------------------------------------------------------
1 |
12 |
13 |
14 | {{ dark }}
15 |
17 | Show dialog
18 |
19 |
21 | Dialog!!!
22 |
23 |
24 |
25 |
26 | {{ isDark }}
27 |
28 |
29 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/playground/ui/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import '@unocss/reset/tailwind.css'
4 |
5 | import 'uno.css'
6 | import './style.css'
7 |
8 | createApp(App).mount('#app')
9 |
--------------------------------------------------------------------------------
/packages/playground/ui/src/style.css:
--------------------------------------------------------------------------------
1 | html {
2 | width: 100vw;
3 | height: 100vh;
4 | }
5 |
6 | html.dark {
7 | background-color: #000;
8 | }
9 |
--------------------------------------------------------------------------------
/packages/playground/ui/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <%= htmlWebpackPlugin.options.title %>
9 |
10 |
11 |
12 | We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please
14 | enable it to continue.
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/packages/playground/webpack/src/App.vue:
--------------------------------------------------------------------------------
1 |
11 |
12 |
13 |
16 |
17 |
27 |
--------------------------------------------------------------------------------
/packages/playground/webpack/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/vuejs/devtools/01ee48167158178b7a07bed87ece379731267898/packages/playground/webpack/src/assets/logo.png
--------------------------------------------------------------------------------
/packages/playground/webpack/src/main.js:
--------------------------------------------------------------------------------
1 | import { devtools } from '@vue/devtools'
2 | import { createApp } from 'vue'
3 | import App from './App.vue'
4 |
5 | devtools.connect('http://localhost', 8098)
6 |
7 | createApp(App).mount('#app')
8 |
--------------------------------------------------------------------------------
/packages/playground/webpack/vue.config.js:
--------------------------------------------------------------------------------
1 | const { defineConfig } = require('@vue/cli-service')
2 |
3 | module.exports = defineConfig({
4 | transpileDependencies: false,
5 | devServer: {
6 | port: 3003,
7 | },
8 | })
9 |
--------------------------------------------------------------------------------
/packages/shared/README.md:
--------------------------------------------------------------------------------
1 | # @vue/devtools-shared
2 |
3 | > Internal utility types shared across @vue/devtools packages.
4 |
--------------------------------------------------------------------------------
/packages/shared/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "@vue/devtools-shared",
3 | "type": "module",
4 | "version": "7.7.6",
5 | "author": "webfansplz",
6 | "license": "MIT",
7 | "repository": {
8 | "directory": "packages/shared",
9 | "type": "git",
10 | "url": "git+https://github.com/vuejs/devtools.git"
11 | },
12 | "exports": {
13 | ".": {
14 | "import": "./dist/index.js",
15 | "require": "./dist/index.cjs"
16 | }
17 | },
18 | "main": "./dist/index.cjs",
19 | "module": "./dist/index.js",
20 | "files": [
21 | "dist"
22 | ],
23 | "scripts": {
24 | "build": "tsup",
25 | "prepare:type": "tsup --dts-only",
26 | "stub": "tsup --watch --onSuccess 'tsup --dts-only'"
27 | },
28 | "dependencies": {
29 | "rfdc": "^1.4.1"
30 | },
31 | "devDependencies": {
32 | "@types/node": "catalog:"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/shared/src/constants.ts:
--------------------------------------------------------------------------------
1 | export const VIEW_MODE_STORAGE_KEY = '__vue-devtools-view-mode__'
2 | export const VITE_PLUGIN_DETECTED_STORAGE_KEY = '__vue-devtools-vite-plugin-detected__'
3 | export const VITE_PLUGIN_CLIENT_URL_STORAGE_KEY = '__vue-devtools-vite-plugin-client-url__'
4 | export const BROADCAST_CHANNEL_NAME = '__vue-devtools-broadcast-channel__'
5 |
--------------------------------------------------------------------------------
/packages/shared/src/env.ts:
--------------------------------------------------------------------------------
1 | export const isBrowser = typeof navigator !== 'undefined'
2 | export const target = (typeof window !== 'undefined'
3 | ? window
4 | : typeof globalThis !== 'undefined'
5 | ? globalThis
6 | // eslint-disable-next-line no-restricted-globals
7 | : typeof global !== 'undefined'
8 | // eslint-disable-next-line no-restricted-globals
9 | ? global
10 | : {}) as typeof globalThis
11 |
12 | export const isInChromePanel = typeof target.chrome !== 'undefined' && !!target.chrome.devtools
13 | export const isInIframe = isBrowser && target.self !== target.top
14 | export const isInElectron = typeof navigator !== 'undefined' && navigator.userAgent?.toLowerCase().includes('electron')
15 | // @ts-expect-error skip type check
16 | export const isNuxtApp = typeof window !== 'undefined' && !!window.__NUXT__
17 | export const isInSeparateWindow = !isInIframe && !isInChromePanel && !isInElectron
18 |
--------------------------------------------------------------------------------
/packages/shared/src/index.ts:
--------------------------------------------------------------------------------
1 | export * from './constants'
2 | export * from './env'
3 | export * from './general'
4 |
--------------------------------------------------------------------------------
/packages/shared/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig({
4 | entryPoints: [
5 | 'src/index.ts',
6 | ],
7 | clean: true,
8 | format: ['esm', 'cjs'],
9 | dts: true,
10 | shims: true,
11 | noExternal: ['rfdc'],
12 | })
13 |
--------------------------------------------------------------------------------
/packages/ui/README.md:
--------------------------------------------------------------------------------
1 | # @vue/devtools-ui
2 |
3 | > UI kit for DevTools.
4 |
--------------------------------------------------------------------------------
/packages/ui/env.d.ts:
--------------------------------------------------------------------------------
1 | ///
6 |
9 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Card.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
--------------------------------------------------------------------------------
/packages/ui/src/components/DropdownButton.vue:
--------------------------------------------------------------------------------
1 |
16 |
17 |
18 |
27 |
28 |
30 |
32 |
33 |
--------------------------------------------------------------------------------
/packages/ui/src/components/IcIcon.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
18 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Icon.vue:
--------------------------------------------------------------------------------
1 |
10 |
11 |
12 |
14 |
--------------------------------------------------------------------------------
/packages/ui/src/components/LoadingIndicator.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Overlay.vue:
--------------------------------------------------------------------------------
1 |
15 |
16 |
17 |
25 |
27 |
28 |
--------------------------------------------------------------------------------
/packages/ui/src/components/Tooltip.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
14 |
16 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/ui/src/composables/index.ts:
--------------------------------------------------------------------------------
1 | export * from './notification'
2 | export type * from './notification'
3 | export * from './theme'
4 |
--------------------------------------------------------------------------------
/packages/ui/src/composables/notification.ts:
--------------------------------------------------------------------------------
1 | import { h, render } from 'vue'
2 | import Notification from '../components/Notification.vue'
3 |
4 | // @unocss-include
5 |
6 | export type VueNotificationPlacement =
7 | | 'top-left' | 'top-center' | 'top-right'
8 | | 'bottom-left' | 'bottom-center' | 'bottom-right'
9 |
10 | export interface VueNotificationOptions {
11 | message: string
12 | type?: 'success' | 'error' | 'info' | 'warning'
13 | classes?: string
14 | duration?: number
15 | placement?: VueNotificationPlacement
16 | onClose?: () => void
17 | }
18 |
19 | export function showVueNotification(options: VueNotificationOptions) {
20 | const container = document.createElement('div')
21 | container.classList.add('$ui-z-max-override', 'fixed')
22 | document.body.appendChild(container)
23 | const originalOnClose = options.onClose
24 | function hide() {
25 | render(null, container)
26 | }
27 |
28 | options.onClose = () => {
29 | hide()
30 | originalOnClose?.()
31 | document.body.removeChild(container)
32 | }
33 | const vNode = h(Notification, options)
34 | render(vNode, container)
35 | }
36 |
--------------------------------------------------------------------------------
/packages/ui/src/composables/theme.ts:
--------------------------------------------------------------------------------
1 | import type { UseColorModeOptions } from '@vueuse/core'
2 | import { useColorMode } from '@vueuse/core'
3 | import { computed } from 'vue'
4 |
5 | export const THEME_KEY = '__vue-devtools-theme__'
6 |
7 | export function useDevToolsColorMode(options: Omit = {}) {
8 | const colorMode = useColorMode({
9 | ...options,
10 | storageKey: THEME_KEY,
11 | })
12 | return {
13 | colorMode,
14 | isDark: computed(() => colorMode.value === 'dark'),
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/ui/src/index.ts:
--------------------------------------------------------------------------------
1 | // No need to import "uno.css" to generate a css bundle file
2 | // cause users will use UnoCSS to handle css fragment classes.
3 | import { vTooltip } from 'floating-vue'
4 | // Still provide a css bundle file for users who don't want to use UnoCSS.
5 | import '@unocss/reset/tailwind.css'
6 |
7 | import 'uno.css'
8 | import 'floating-vue/dist/style.css'
9 |
10 | export * from './components'
11 | export * from './composables'
12 | export * from './types'
13 |
14 | export {
15 | vTooltip,
16 | }
17 |
--------------------------------------------------------------------------------
/packages/ui/src/types/floating-vue.ts:
--------------------------------------------------------------------------------
1 | import type { Placement } from 'floating-vue'
2 |
3 | export interface FloatingVueCommonProps {
4 | trigger?: 'click' | 'hover'
5 | distance?: number
6 | skidding?: number
7 | placement?: Placement
8 | disabled?: boolean
9 | shown?: boolean
10 | }
11 |
--------------------------------------------------------------------------------
/packages/ui/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export * from './floating-vue'
2 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Badge.story.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 | something here
9 | 100
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Card.story.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
9 | Card
10 |
11 |
12 |
13 |
14 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Checkbox.story.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
12 | value: {{ checked }}
13 |
15 |
16 |
17 |
18 | value: {{ checked }}
20 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Confirm.story.vue:
--------------------------------------------------------------------------------
1 |
21 |
22 |
23 |
24 |
25 |
27 |
28 | Show Confirm
29 |
30 |
34 |
35 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Dialog.story.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
14 | Show Dialog
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | Show Dialog
24 |
25 |
26 |
27 |
28 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Drawer.story.vue:
--------------------------------------------------------------------------------
1 |
9 |
10 |
11 |
12 |
13 |
19 |
20 |
21 | Show Drawer
22 |
23 |
24 |
25 | 1
26 |
27 |
28 |
30 |
31 |
--------------------------------------------------------------------------------
/packages/ui/storybook/IcIcon.story.vue:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
7 |
8 |
10 |
11 |
12 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Switch.story.vue:
--------------------------------------------------------------------------------
1 |
7 |
8 |
9 |
10 |
11 |
13 |
14 |
15 | Select
16 |
17 |
18 |
19 |
20 | Select
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/packages/ui/storybook/Tooltip.story.vue:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 | Hover me
11 |
12 |
13 | Tooltip content
14 |
15 |
16 |
17 |
19 |
20 |
--------------------------------------------------------------------------------
/packages/ui/theme/index.ts:
--------------------------------------------------------------------------------
1 | export * from './theme'
2 | export * from './uno.config'
3 |
--------------------------------------------------------------------------------
/packages/ui/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "es2017",
4 | "jsx": "preserve",
5 | "lib": ["esnext", "DOM"],
6 | "module": "esnext",
7 | "moduleResolution": "Bundler",
8 | "resolveJsonModule": true,
9 | "strict": true,
10 | "strictNullChecks": true,
11 | "esModuleInterop": true
12 | },
13 | "include": [
14 | "env.d.ts",
15 | "storybook/**/*.story.vue",
16 | "src/**/*",
17 | "src/**/*.vue"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/packages/ui/uno.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'unocss'
2 | import { unoConfig } from './theme'
3 |
4 | export default defineConfig(unoConfig)
5 |
--------------------------------------------------------------------------------
/packages/vite/README.md:
--------------------------------------------------------------------------------
1 | # vite-plugin-vue-devtools
2 |
3 | > `vite-plugin-vue-devtools` is a `Vite` plugin designed to enhance the `Vue` developer experience.
4 |
5 | ## Installation
6 |
7 | ```sh
8 |
9 | npm add -D vite-plugin-vue-devtools
10 |
11 | ```
12 |
13 | ## Usage
14 |
15 | ### Configuration Vite
16 |
17 | ```ts
18 | import { defineConfig } from 'vite'
19 | import VueDevTools from 'vite-plugin-vue-devtools'
20 |
21 | export default defineConfig({
22 | plugins: [
23 | VueDevTools(),
24 | vue(),
25 | ],
26 | })
27 | ```
28 |
29 | ## Documentation
30 |
31 | Check out all the DevTools details at [devtools.vuejs.org](https://devtools.vuejs.org).
32 |
--------------------------------------------------------------------------------
/packages/vite/build.config.ts:
--------------------------------------------------------------------------------
1 | import { defineBuildConfig } from 'unbuild'
2 |
3 | export default defineBuildConfig({
4 | entries: [
5 | 'src/vite',
6 | ],
7 | clean: true,
8 | declaration: true,
9 | externals: [
10 | 'vite',
11 | 'vite-plugin-inspect',
12 | 'vite-plugin-vue-inspector',
13 | 'execa',
14 | ],
15 | rollup: {
16 | emitCJS: true,
17 | inlineDependencies: true,
18 | },
19 | })
20 |
--------------------------------------------------------------------------------
/packages/vite/esbuild-shims/cjs-shim.ts:
--------------------------------------------------------------------------------
1 | import { createRequire } from 'node:module'
2 |
3 | globalThis.require = createRequire(import.meta.url)
4 |
--------------------------------------------------------------------------------
/packages/vite/src/dir.ts:
--------------------------------------------------------------------------------
1 | import { dirname, resolve } from 'node:path'
2 | import { fileURLToPath } from 'node:url'
3 |
4 | export const DIR_DIST = typeof __dirname !== 'undefined'
5 | ? __dirname
6 | : dirname(fileURLToPath(import.meta.url))
7 |
8 | export const DIR_CLIENT = resolve(DIR_DIST, '../client')
9 |
--------------------------------------------------------------------------------
/packages/vite/src/rpc/get-config.ts:
--------------------------------------------------------------------------------
1 | import { RpcFunctionCtx } from './types'
2 |
3 | export function getConfigFunctions(ctx: RpcFunctionCtx) {
4 | return {
5 | getRoot() {
6 | return ctx.config.root
7 | },
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/packages/vite/src/rpc/graph.ts:
--------------------------------------------------------------------------------
1 | import type { ModuleInfo, ViteRPCFunctions } from '@vue/devtools-core'
2 | import { getViteRpcServer } from '@vue/devtools-kit'
3 | import { debounce } from 'perfect-debounce'
4 | import { RpcFunctionCtx } from './types'
5 |
6 | export function getGraphFunctions(ctx: RpcFunctionCtx) {
7 | const { rpc, server } = ctx
8 | const debouncedModuleUpdated = debounce(() => {
9 | getViteRpcServer?.()?.broadcast?.emit('graphModuleUpdated')
10 | }, 100)
11 |
12 | server.middlewares.use((_, __, next) => {
13 | debouncedModuleUpdated()
14 | next()
15 | })
16 | return {
17 | async getGraphModules(): Promise {
18 | const list = await rpc.list()
19 | const modules = list?.modules || []
20 |
21 | return modules
22 | },
23 | }
24 | }
25 |
--------------------------------------------------------------------------------
/packages/vite/src/rpc/index.ts:
--------------------------------------------------------------------------------
1 | import { getAssetsFunctions } from './assets'
2 | import { getConfigFunctions } from './get-config'
3 | import { getGraphFunctions } from './graph'
4 | import { RpcFunctionCtx } from './types'
5 |
6 | export function getRpcFunctions(ctx: RpcFunctionCtx) {
7 | return {
8 | heartbeat() {
9 | return true
10 | },
11 | ...getAssetsFunctions(ctx),
12 | ...getConfigFunctions(ctx),
13 | ...getGraphFunctions(ctx),
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/vite/src/rpc/types.ts:
--------------------------------------------------------------------------------
1 | import { ResolvedConfig, ViteDevServer } from 'vite'
2 | import { ViteInspectAPI } from 'vite-plugin-inspect/index'
3 |
4 | export interface RpcFunctionCtx {
5 | rpc: ViteInspectAPI['rpc']
6 | server: ViteDevServer
7 | config: ResolvedConfig
8 | }
9 |
--------------------------------------------------------------------------------
/packages/vite/src/utils.ts:
--------------------------------------------------------------------------------
1 | export function removeUrlQuery(url: string): string {
2 | return url.replace(/\?.*$/, '')
3 | }
4 |
--------------------------------------------------------------------------------
/packages/vite/tsup.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'tsup'
2 |
3 | export default defineConfig({
4 | entryPoints: [
5 | 'src/vite.ts',
6 | ],
7 | // To avoid esbuild compile import.meta.url to import_meta.url
8 | // See: https://github.com/vitejs/vite/issues/503
9 | target: 'es2020',
10 | clean: true,
11 | format: ['esm', 'cjs'],
12 | // Force esbuild to use .mjs extension for ESM output
13 | outExtension({ format }) {
14 | if (format === 'esm') {
15 | return {
16 | js: '.mjs',
17 | dts: '.d.ts',
18 | }
19 | }
20 | else if (format === 'cjs') {
21 | return {
22 | js: '.cjs',
23 | dts: '.d.cts',
24 | }
25 | }
26 | return {
27 | js: '.js',
28 | dts: '.d.ts',
29 | }
30 | },
31 | // See: https://github.com/evanw/esbuild/issues/1921
32 | inject: ['./esbuild-shims/cjs-shim.ts'],
33 | dts: true,
34 | shims: true,
35 | })
36 |
--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 | - packages/*
3 | - docs
4 | - packages/playground/**
5 |
6 | catalog:
7 | '@iconify/json': ^2.2.321
8 | '@types/node': ^22.13.14
9 | '@unocss/reset': ^66.0.0
10 | '@vitejs/plugin-vue': ^5.2.3
11 | '@vueuse/core': ^12.8.2
12 | '@vueuse/integrations': ^12.8.2
13 | colord: ^2.9.3
14 | execa: ^9.5.2
15 | floating-vue: 5.2.2
16 | mitt: ^3.0.1
17 | pathe: ^2.0.3
18 | perfect-debounce: ^1.0.0
19 | pinia: ^3.0.1
20 | sass-embedded: ^1.86.0
21 | serve: ^14.2.4
22 | shiki: ^3.2.1
23 | splitpanes: ^4.0.3
24 | typescript: ^5.8.2
25 | unocss: ^66.0.0
26 | unplugin-auto-import: ^19.1.2
27 | vite: ^6.2.1
28 | vite-hot-client: ^2.0.4
29 | vite-plugin-dts: ^4.5.3
30 | vite-plugin-inspect: 0.8.9
31 | vue: ^3.5.13
32 | vue-router: ^4.5.0
33 | vue-virtual-scroller: 2.0.0-beta.8
34 |
--------------------------------------------------------------------------------
/uno.config.ts:
--------------------------------------------------------------------------------
1 | import { defineConfig } from 'unocss'
2 |
3 | import config from './packages/client/uno.config'
4 |
5 | export default defineConfig({
6 | ...config,
7 | configDeps: [
8 | './packages/client/uno.config.ts',
9 | './packages/ui/uno.config.ts',
10 | ],
11 | })
12 |
--------------------------------------------------------------------------------
/vitest.config.ts:
--------------------------------------------------------------------------------
1 | import Vue from '@vitejs/plugin-vue'
2 | import AutoImport from 'unplugin-auto-import/vite'
3 | import { defineConfig } from 'vitest/config'
4 |
5 | export default defineConfig({
6 | plugins: [Vue(), AutoImport({
7 | imports: [
8 | 'vue',
9 | 'vue-router',
10 | '@vueuse/core',
11 | ],
12 | dts: true,
13 | })],
14 | define: {
15 | __DEV__: true,
16 | __FEATURE_PROD_DEVTOOLS__: true,
17 | },
18 | test: {
19 | globals: true,
20 | },
21 | })
22 |
--------------------------------------------------------------------------------
10 |
11 | 
7 | 
13 | Hey: {{ route.params.id }}
14 | Counter: {{ counterStore.count }}
15 | 
14 |