diff --git a/packages/shell-dev-vue3/public/target.html b/packages/shell-dev-vue3/public/target.html index f2c35574b..d52cffb7a 100644 --- a/packages/shell-dev-vue3/public/target.html +++ b/packages/shell-dev-vue3/public/target.html @@ -13,6 +13,7 @@
+
diff --git a/packages/shell-dev-vue3/src/App.vue b/packages/shell-dev-vue3/src/App.vue index 53e38ae41..cdbf56b64 100644 --- a/packages/shell-dev-vue3/src/App.vue +++ b/packages/shell-dev-vue3/src/App.vue @@ -18,6 +18,7 @@ import Mixins from './Mixins.vue' import Animation from './Animation.vue' import { h, createApp } from 'vue' +import SimplePlugin from './devtools-plugin/simple' export default { name: 'MyApp', @@ -54,7 +55,9 @@ export default { methods: { createApp () { - createApp(Child).mount('#nested-app') + const app = createApp(Child) + app.use(SimplePlugin) + app.mount('#nested-app') } } } diff --git a/packages/shell-dev-vue3/src/devtools-plugin/simple.js b/packages/shell-dev-vue3/src/devtools-plugin/simple.js new file mode 100644 index 000000000..88ec16312 --- /dev/null +++ b/packages/shell-dev-vue3/src/devtools-plugin/simple.js @@ -0,0 +1,19 @@ +import { setupDevtoolsPlugin } from '@vue/devtools-api' + +export default { + install: (app) => { + setupDevtoolsPlugin({ + id: 'simple-plugin', + label: 'Simple devtools plugin', + app + }, (api) => { + api.on.visitComponentTree((payload, ctx) => { + payload.treeNode.tags.push({ + label: 'simple plugin', + textColor: 0xFFAAAA, + backgroundColor: 0xFFEEEE + }) + }) + }) + } +} diff --git a/packages/shell-dev-vue3/src/main.js b/packages/shell-dev-vue3/src/main.js index dcb3234f6..ac41998de 100644 --- a/packages/shell-dev-vue3/src/main.js +++ b/packages/shell-dev-vue3/src/main.js @@ -3,6 +3,7 @@ import { createRouter, createWebHashHistory } from 'vue-router' import App from './App.vue' import App3 from './App3.vue' import TestPlugin from './devtools-plugin' +import SimplePlugin from './devtools-plugin/simple' import store from './store' // eslint-disable-next-line no-extend-native @@ -33,6 +34,7 @@ app.use(TestPlugin) app.mount('#app') const app2 = createApp({ + name: 'App2', render: () => h('h1', 'App 2') }) app2.mount('#app2') @@ -47,3 +49,12 @@ createApp({ hide: true } }).mount('#ghost-app') + +setTimeout(() => { + const app = createApp({ + name: 'DelayedApp', + render: () => h('h1', 'Delayed app') + }) + app.use(SimplePlugin) + app.mount('#delay-app') +}, 1000)