chore(deps): upgrade to Vite DevTools v0.4.0 and devframe v0.6.0

packages/devtools/client/composables/client.ts

@@ -8,7 +8,7 @@ import { computed, ref } from 'vue'
 import { useState } from '#imports'
 import { renderMarkdown } from './client-services/markdown'
 import { renderCodeHighlight } from './client-services/shiki'
-import { connectPromise, rpc, rpcClient } from './rpc'
+import { connectPromise, rpc, rpcClient, upsertClientFunction } from './rpc'
 
 export function useClient() {
   return useState<NuxtDevtoolsHostClient>('devtools-client')
@@ -62,13 +62,8 @@ export function useInjectionClient(): ComputedRef<NuxtDevtoolsIframeClient> {
       extendClientRpc(namespace, functions) {
         const register = (client: DevToolsRpcClient) => {
           for (const [name, handler] of Object.entries(functions)) {
-            if (typeof handler === 'function') {
-              client.client.register({
-                name: `${namespace}:${name}`,
-                type: 'event',
-                handler: handler as any,
-              })
-            }
+            if (typeof handler === 'function')
+              upsertClientFunction(client, `${namespace}:${name}`, handler as any)
           }
         }
 

packages/devtools/client/composables/rpc.ts

@@ -37,15 +37,10 @@ async function connectDevToolsRpc(): Promise<DevToolsRpcClient> {
 
     rpcClient.value = client
 
-    // Register client functions so the server can call them
+    // Register client functions so the server can call them.
     for (const [name, handler] of Object.entries(clientFunctions)) {
-      if (typeof handler === 'function') {
-        client.client.register({
-          name,
-          type: 'event',
-          handler: handler as any,
-        })
-      }
+      if (typeof handler === 'function')
+        upsertClientFunction(client, name, handler)
     }
 
     // eslint-disable-next-line no-console
@@ -70,21 +65,22 @@ async function connectDevToolsRpc(): Promise<DevToolsRpcClient> {
 export async function registerClientFunctions() {
   const client = rpcClient.value || await connectPromise
   for (const [name, handler] of Object.entries(clientFunctions)) {
-    if (typeof handler === 'function') {
-      try {
-        client.client.update({
-          name,
-          type: 'event',
-          handler: handler as any,
-        })
-      }
-      catch {
-        client.client.register({
-          name,
-          type: 'event',
-          handler: handler as any,
-        })
-      }
-    }
+    if (typeof handler === 'function')
+      upsertClientFunction(client, name, handler)
   }
 }
+
+/**
+ * Register (or replace) a client-side event function on the devframe RPC host.
+ *
+ * devframe 0.6 split registration into `register()` (throws DF0021 if the name
+ * already exists) and `update()` (throws DF0022 if it does not), so pick the
+ * right one based on the current definitions to keep this an idempotent upsert.
+ */
+export function upsertClientFunction(client: DevToolsRpcClient, name: string, handler: (...args: any[]) => any) {
+  const definition = { name, type: 'event', handler } as const
+  if (client.client.definitions.has(name))
+    client.client.update(definition as any)
+  else
+    client.client.register(definition as any)
+}

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

@@ -277,6 +277,7 @@ export async function setupDevToolsClient({
 
   setupRouteTracking(timeline, router)
   setupReactivity(client, router, timeline)
+  bindVueDevToolsIframe()
 
   clientRef.value = client
 
@@ -285,6 +286,31 @@ export async function setupDevToolsClient({
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
       client.devtools.toggle()
   })
+
+  // The Nuxt DevTools panel is rendered as an iframe **inside Vite DevTools'
+  // dock**, so we never create it ourselves (`getIframe()` above is legacy).
+  // The `@vue/devtools-kit` iframe messaging channel, however, only talks to
+  // whichever iframe was registered via `setIframeServerContext()` — without
+  // that the in-panel Vue DevTools applets (Pinia, component inspector, …) sit
+  // on "Connecting..." forever because the host backend never learns which
+  // iframe to answer. Point it at the dock iframe as soon as Vite DevTools
+  // mounts it (and keep it pointed there if the element is recreated).
+  function bindVueDevToolsIframe() {
+    let bound: HTMLIFrameElement | undefined
+    const bind = () => {
+      const ctx = getViteDevToolsContext()
+      const dockIframe = ctx?.docks?.getStateById?.('nuxt:devtools')?.domElements?.iframe as HTMLIFrameElement | null | undefined
+      if (!dockIframe || dockIframe === bound)
+        return
+      bound = dockIframe
+      iframe = dockIframe
+      // The channel reads `.contentWindow` lazily on every message, so binding
+      // the element once is enough even across in-iframe navigations/reloads.
+      setIframeServerContext(dockIframe)
+    }
+    bind()
+    setInterval(bind, 500)
+  }
 }
 
 export function useClientColorMode(): Ref<ColorScheme> {