fix: inject inspector client manually to ensure devtools hook register normally

Author: webfansplz

packages/client/logic/hook.ts

@@ -13,8 +13,9 @@ function subscribeHook() {
   const client = useDevToolsClient()
   const hook = client.value.hook
   hook.on(DevToolsHooks.APP_INIT, (app) => {
-    if (app?._vueDevtools_hidden_)
+    if (!app || app._instance.type?.devtools?.hide)
       return
+
     vueApp.value = app
     instance.value = app._instance
   })

packages/node/package.json

@@ -57,7 +57,7 @@
     "execa": "^7.2.0",
     "sirv": "^2.0.3",
     "vite-plugin-inspect": "^0.7.35",
-    "vite-plugin-vue-inspector": "^3.5.0"
+    "vite-plugin-vue-inspector": "^3.6.0"
   },
   "devDependencies": {
     "@types/node": "^20.4.8",

packages/node/src/vite.ts

@@ -178,6 +178,15 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
               src: '/@id/virtual:vue-devtools-path:app.js',
             },
           },
+          // inject inspector script manually to ensure it's loaded after vue-devtools
+          {
+            tag: 'script',
+            injectTo: 'head',
+            attrs: {
+              type: 'module',
+              src: '/@id/virtual:vue-inspector-path:load.js',
+            },
+          },
         ],
       }
     },
@@ -187,10 +196,11 @@ export default function VitePluginVueDevTools(options?: VitePluginVueDevToolsOpt
 
   return [
     VueInspector({
+      lazyLoad: pluginOptions.appendTo ? 200 : false,
       toggleComboKey: '',
       toggleButtonVisibility: 'never',
       openInEditorHost: pluginOptions.openInEditorHost,
-      ...(pluginOptions.appendTo ? { appendTo: pluginOptions.appendTo } : {}),
+      appendTo: pluginOptions.appendTo || 'manually',
     }),
     plugin,
     inspect,