feat: add expiermental support for Vite DevTools

Author: antfu

package.json

@@ -35,6 +35,7 @@
     "@types/which": "catalog:types",
     "@types/ws": "catalog:types",
     "@unocss/eslint-config": "catalog:buildtools",
+    "@vitejs/devtools-kit": "catalog:types",
     "bumpp": "catalog:cli",
     "conventional-changelog-cli": "catalog:cli",
     "eslint": "catalog:cli",

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

@@ -43,6 +43,14 @@ export interface ModuleOptions {
    */
   viteInspect?: boolean
 
+  /**
+   * Enable Vite DevTools integration
+   *
+   * @experimental
+   * @default false
+   */
+  viteDevTools?: boolean
+
   /**
    * Disable dev time authorization check.
    *

packages/devtools/client/plugins/global.ts

@@ -1,3 +1,4 @@
+import type { NuxtDevtoolsHostClient } from '@nuxt/devtools-kit/types'
 import { defineNuxtPlugin, useRouter } from '#imports'
 import { triggerRef } from 'vue'
 import { useClient } from '../composables/client'
@@ -16,27 +17,47 @@ export default defineNuxtPlugin(() => {
     rpc.openInEditor(path)
   }
 
-  Object.defineProperty(window, '__NUXT_DEVTOOLS_VIEW__', {
-    value: {
-      setClient(_client) {
-        if (client.value === _client)
-          return
+  function setupClient(_client: NuxtDevtoolsHostClient) {
+    if (client.value === _client)
+      return
+
+    client.value = _client
+
+    _client.hooks.hook('host:update:reactivity', onUpdateReactivity)
+    _client.hooks.hook('host:inspector:click', onInspectorClick)
+    _client.hooks.hook('host:action:reload', () => location.reload())
+    _client.hooks.hook('host:action:navigate', (path: string) => router.push(path))
 
-        client.value = _client
+    // eslint-disable-next-line no-console
+    console.log('[nuxt-devtools] Client connected', _client)
+  }
 
-        _client.hooks.hook('host:update:reactivity', onUpdateReactivity)
-        _client.hooks.hook('host:inspector:click', onInspectorClick)
-        _client.hooks.hook('host:action:reload', () => location.reload())
-        _client.hooks.hook('host:action:navigate', (path: string) => router.push(path))
+  function connectParent() {
+    try {
+      if (window.parent === window)
+        return
+      if (window.parent?.__NUXT_DEVTOOLS_HOST__) {
+        setupClient(window.parent.__NUXT_DEVTOOLS_HOST__)
+      }
+    }
+    catch (error) {
+      console.error('[nuxt-devtools] Failed to connect parent', error)
+    }
+  }
 
-        // eslint-disable-next-line no-console
-        console.log('[nuxt-devtools] Client connected', _client)
+  Object.defineProperty(window, '__NUXT_DEVTOOLS_VIEW__', {
+    value: {
+      setClient(_client) {
+        setupClient(_client)
       },
     } as typeof window['__NUXT_DEVTOOLS_VIEW__'],
     enumerable: false,
     configurable: true,
   })
 
+  connectParent()
+  setTimeout(() => connectParent(), 1000)
+
   router.afterEach(() => {
     const path = router.currentRoute.value?.path
     if (!path || path.includes('__'))

packages/devtools/src/module-main.ts

@@ -1,3 +1,4 @@
+import type {} from '@vitejs/devtools-kit'
 import type { ServerResponse } from 'node:http'
 import type { Nuxt } from 'nuxt/schema'
 import type { ViteDevServer } from 'vite'
@@ -34,7 +35,7 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
   }
 
   // Determine if user aware devtools, by checking the presentation in the config
-  const enabledExplicitly = (nuxt.options.devtools === true as unknown)
+  const enabledExplicitly = (nuxt.options.devtools === true)
     || (nuxt.options.devtools && nuxt.options.devtools.enabled)
     || !!nuxt.options.modules.find(m => m === '@nuxt/devtools' || m === '@nuxt/devtools-edge' || m === '@nuxt/devtools-nightly')
 
@@ -58,6 +59,26 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
     mode: 'server',
   })
 
+  if (options.viteDevTools) {
+    // eslint-disable-next-line no-console
+    console.log('[nuxt-devtools] Enabling experimental Vite DevTools integration')
+    addVitePlugin({
+      name: 'nuxt:devtools',
+      devtools: {
+        setup(ctx) {
+          ctx.docks.register({
+            id: 'nuxt:devtools',
+            type: 'iframe',
+            icon: 'https://nuxt.com/assets/design-kit/icon-green.svg',
+            title: 'Nuxt DevTools',
+            url: '/__nuxt_devtools__/client/',
+          })
+        },
+      },
+    })
+    // TODO: disable builtin devtools panel for vite devtools
+  }
+
   // Mainly for the injected runtime plugin to access the settings
   // Usage `import settings from '#build/devtools/settings'`
   addTemplate({

packages/devtools/src/runtime/plugins/view/client.ts

@@ -120,8 +120,9 @@ export async function setupDevToolsClient({
     try {
       iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client)
     }
-    catch {
+    catch (e) {
       // cross-origin
+      console.error('[nuxt-devtools] Failed to connect view', e)
     }
     return client
   }

pnpm-lock.yaml

@@ -142,6 +142,7 @@ catalogs:
     '@types/which': ^3.0.4
     '@types/ws': ^8.18.1
     '@unhead/schema': ^2.0.19
+    '@vitejs/devtools-kit': 0.0.0-alpha.6
     unimport: ^5.5.0
 onlyBuiltDependencies:
   - '@parcel/watcher'