feat: improve vite devtools integration

Author: antfu

packages/devtools/package.json

@@ -46,8 +46,14 @@
     "prepack": "pnpm build"
   },
   "peerDependencies": {
+    "@vitejs/devtools": "*",
     "vite": ">=6.0"
   },
+  "peerDependenciesMeta": {
+    "@vitejs/devtools": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "@nuxt/devtools-kit": "workspace:*",
     "@nuxt/devtools-wizard": "workspace:*",
@@ -102,6 +108,7 @@
     "@unocss/preset-icons": "catalog:buildtools",
     "@unocss/preset-uno": "catalog:buildtools",
     "@unocss/runtime": "catalog:frontend",
+    "@vitejs/devtools": "catalog:buildtools",
     "@vitest/ui": "catalog:cli",
     "@vue/devtools-applet": "catalog:frontend",
     "@vueuse/nuxt": "catalog:buildtools",

packages/devtools/src/module-main.ts

@@ -60,8 +60,9 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
   })
 
   if (options.viteDevTools) {
-    // eslint-disable-next-line no-console
-    console.log('[nuxt-devtools] Enabling experimental Vite DevTools integration')
+    logger.info('[nuxt-devtools] Enabling experimental Vite DevTools integration')
+    const DevTools = await import('@vitejs/devtools').then(r => r.DevTools())
+    addVitePlugin(DevTools)
     addVitePlugin({
       name: 'nuxt:devtools',
       devtools: {
@@ -76,7 +77,10 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
         },
       },
     })
-    // TODO: disable builtin devtools panel for vite devtools
+    addPlugin({
+      src: join(runtimeDir, 'plugins/vite-devtools.client'),
+      mode: 'client',
+    })
   }
 
   // Mainly for the injected runtime plugin to access the settings
@@ -88,7 +92,12 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
         {
           ...defaultTabOptions.ui,
           // When not enabled explicitly, we hide the panel by default
-          showPanel: enabledExplicitly ? true : null,
+          // When Vite DevTools is enabled, we hide the panel by default
+          showPanel: options.viteDevTools
+            ? false
+            : enabledExplicitly
+              ? true
+              : null,
         },
         { root: nuxt.options.rootDir },
       )

packages/devtools/src/runtime/plugins/vite-devtools.client.ts

@@ -0,0 +1,5 @@
+import { defineNuxtPlugin } from '#imports'
+
+export default defineNuxtPlugin(() => {
+  import('@vitejs/devtools/client/inject')
+})