fix: vue-devtools runtime injection, close #667

packages/devtools/package.json

@@ -29,7 +29,7 @@
     "dist"
   ],
   "scripts": {
-    "build": "pnpm dev:prepare && pnpm build:module && pnpm build:discovery && pnpm build:client && esno scripts/prepare.ts",
+    "build": "pnpm dev:prepare && pnpm build:module && pnpm build:discovery && pnpm build:client",
     "build:client": "nuxi generate client",
     "build:module": "nuxt-build-module build",
     "build:discovery": "npx discovery-build -c .discoveryrc.cjs -s -o client/public/discovery",
@@ -48,6 +48,8 @@
     "@nuxt/devtools-kit": "workspace:*",
     "@nuxt/devtools-wizard": "workspace:*",
     "@nuxt/kit": "catalog:",
+    "@vue/devtools-core": "catalog:",
+    "@vue/devtools-kit": "catalog:",
     "birpc": "catalog:",
     "consola": "catalog:",
     "destr": "catalog:",
@@ -98,8 +100,6 @@
     "@unocss/runtime": "catalog:",
     "@vitest/ui": "catalog:",
     "@vue/devtools-applet": "catalog:",
-    "@vue/devtools-core": "catalog:",
-    "@vue/devtools-kit": "catalog:",
     "@vueuse/nuxt": "catalog:",
     "@xterm/addon-fit": "catalog:",
     "@xterm/xterm": "catalog:",

packages/devtools/src/integrations/vue-devtools.ts

@@ -1,28 +1,15 @@
 import type { NuxtDevtoolsServerContext } from '../types'
-import { addVitePlugin } from '@nuxt/kit'
+import { addPluginTemplate } from '@nuxt/kit'
 import { join } from 'pathe'
 import { runtimeDir } from '../dirs'
 
 export function setup({ nuxt }: NuxtDevtoolsServerContext) {
   if (!nuxt.options.dev || nuxt.options.test)
     return
 
-  addVitePlugin({
-    name: 'vue:devtools',
-    async resolveId(importee: string) {
-      if (importee.startsWith('virtual:vue-devtools-path:')) {
-        const resolved = importee.replace('virtual:vue-devtools-path:', join(runtimeDir, 'vue-devtools/'))
-        return resolved
-      }
-    },
-    transform(code, id, options) {
-      const [filename] = id.split('?', 2)
-      const appendTo = /\/entry\.m?js$/
-
-      if (!options?.ssr && appendTo.test(filename))
-        code = `import 'virtual:vue-devtools-path:overlay.js';\n${code}`
-
-      return code
-    },
+  addPluginTemplate({
+    name: 'vue-devtools-client',
+    mode: 'client',
+    src: join(runtimeDir, 'vue-devtools-client.js'),
   })
 }

packages/devtools/src/runtime/vue-devtools/overlay.js → packages/devtools/src/runtime/vue-devtools-client.ts

@@ -1,8 +1,10 @@
 import { functions } from '@vue/devtools-core'
 import { createRpcServer, devtools } from '@vue/devtools-kit'
 
-devtools.init()
+export default () => {
+  devtools.init()
 
-createRpcServer(functions, {
-  preset: 'iframe',
-})
+  createRpcServer(functions, {
+    preset: 'iframe',
+  })
+}