feat(devtools): restore Vue DevTools through vite-plugin-vue-devtools v9 (#1099)

Author: antfubot

packages/devtools-kit/src/_types/options.ts

@@ -37,6 +37,14 @@ export interface ModuleOptions {
    */
   componentInspector?: boolean
 
+  /**
+   * Enable the Vue DevTools integration, which registers Vue DevTools'
+   * own dock entry next to the Nuxt one.
+   *
+   * @default true
+   */
+  vueDevTools?: boolean
+
   /**
    * Enable the Vite Inspect integration.
    *

packages/devtools/package.json

@@ -75,6 +75,7 @@
     "tinyglobby": "catalog:prod",
     "unstorage": "catalog:prod",
     "verkit": "catalog:prod",
+    "vite-plugin-vue-devtools": "catalog:prod",
     "vite-plugin-vue-tracer": "catalog:prod"
   },
   "devDependencies": {

packages/devtools/src/constant.ts

@@ -6,6 +6,7 @@ const isSandboxed = provider === 'stackblitz' || provider === 'codesandbox'
 export const defaultOptions: ModuleOptions = {
   enabled: undefined, // determine multiple conditions
   componentInspector: true,
+  vueDevTools: true,
   viteInspect: true,
   dataInspector: true,
   codeServer: {

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

@@ -0,0 +1,48 @@
+import type { PluginWithDevTools } from '@vitejs/devtools-kit'
+import type { NuxtDevtoolsServerContext } from '../types'
+import { addPluginTemplate, addVitePlugin } from '@nuxt/kit'
+import { vueDevtools } from 'vite-plugin-vue-devtools'
+import { skipInSSR } from '../server-rpc/skip-in-ssr'
+
+export function setup({ nuxt }: NuxtDevtoolsServerContext) {
+  if (!nuxt.options.dev || nuxt.options.test)
+    return
+
+  // Added isomorphically — `{ server: false }` would strip the `devtools`
+  // property (see the note in `module-main.ts`) — so guard the dock
+  // registration against Nuxt's SSR Vite instance, which would otherwise
+  // register a duplicate `vue-devtools` dock. Same pattern as the module's
+  // own dock registration.
+  // `vueDevtools()` always produces plain plugin objects; its declared
+  // `PluginOption[]` return type is wider than that.
+  const plugins = (vueDevtools() as PluginWithDevTools[]).map((plugin) => {
+    const { devtools } = plugin
+    if (!devtools?.setup)
+      return plugin
+    return {
+      ...plugin,
+      devtools: {
+        ...devtools,
+        setup: (ctx: Parameters<typeof devtools.setup>[0]) =>
+          skipInSSR(ctx) ? undefined : devtools.setup(ctx),
+      },
+    }
+  })
+  addVitePlugin(plugins)
+
+  // Nuxt has no Vite HTML entry for the plugin's own injection to hook into;
+  // load the Vue DevTools client hook through an early Nuxt client plugin
+  // instead.
+  addPluginTemplate({
+    filename: 'devtools/vue-devtools-client.mjs',
+    name: 'vue-devtools-client',
+    mode: 'client',
+    order: -1_000,
+    getContents: () => [
+      `import 'virtual:vue-devtools-client'`,
+      ``,
+      `export default () => {}`,
+      ``,
+    ].join('\n'),
+  })
+}

packages/devtools/src/module-main.ts

@@ -116,6 +116,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
       // pre-bundle here.
       'nuxt > @nuxt/devtools > @vitejs/devtools-kit/client',
       'nuxt > @nuxt/devtools > error-stack-parser-es',
+      'nuxt > @nuxt/devtools > vite-plugin-vue-devtools/client',
       'nuxt > @nuxt/devtools > vite-plugin-vue-tracer/client/overlay',
     )
   }
@@ -371,6 +372,9 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
   if (options.componentInspector !== false)
     await import('./integrations/vue-tracer').then(({ setup }) => setup(ctx))
 
+  if (options.vueDevTools !== false)
+    await import('./integrations/vue-devtools').then(({ setup }) => setup(ctx))
+
   if (options.codeServer?.enabled === false && options.vscode !== undefined) {
     deprecate(nuxt, 'NDT_DEP_0008', {
       api: 'devtools.vscode',

packages/devtools/test/devtools-origin.test.ts

@@ -71,6 +71,7 @@ describe('vite DevTools origin', () => {
       dataInspector: false,
       viteInspect: false,
       componentInspector: false,
+      vueDevTools: false,
       codeServer: { enabled: false },
     } as any, nuxt)
 

pnpm-lock.yaml

@@ -13,6 +13,7 @@ minimumReleaseAgeExclude:
   - '@vitejs/devtools'
   - devframe
   - vite-plugin-inspect@12.0.2
+  - vite-plugin-vue-devtools@9.0.0-beta.0
   - '@devframes/hub-ui'
   - '@devframes/json-render-ui'
   - '@devframes/service-open'
@@ -247,6 +248,7 @@ catalogs:
     unstorage: ^1.17.5
     verkit: ^0.4.0
     vite-plugin-inspect: ^12.0.2
+    vite-plugin-vue-devtools: ^9.0.0-beta.0
     vite-plugin-vue-tracer: ^1.5.0
   types:
     '@nuxt/schema': *nuxt-schema