@nuxt/devtools-nightly 3.2.4-29563482.f9a1d97 → 4.0.0-29884714.dcb247f

package/dist/chunks/og.mjs

@@ -0,0 +1,32 @@
+import { createOgDevframe } from '@devframes/plugin-og';
+import { onDevtoolsReady, NUXT_DEVTOOLS_GROUP_ID } from '@nuxt/devtools-kit';
+
+function setup({ nuxt }) {
+  const defaultUrl = nuxt.options.devServer?.url;
+  let liveOrigin;
+  nuxt.hook("listen", (_server, listener) => {
+    if (listener?.url)
+      liveOrigin = new URL(listener.url).origin;
+  });
+  const definition = createOgDevframe({
+    defaultUrl,
+    fetch: (input, init) => {
+      if (liveOrigin && defaultUrl) {
+        const configured = new URL(defaultUrl).origin;
+        if (input.startsWith(configured))
+          input = liveOrigin + input.slice(configured.length);
+      }
+      return fetch(input, init);
+    }
+  });
+  onDevtoolsReady((kit) => {
+    return kit.install(definition, {
+      dock: {
+        groupId: NUXT_DEVTOOLS_GROUP_ID,
+        category: "analyze"
+      }
+    });
+  }, nuxt);
+}
+
+export { setup };

package/dist/chunks/timeline.mjs

@@ -1,9 +1,90 @@
+import { addBuildPlugin } from '@nuxt/kit';
 import { resolve } from 'pathe';
-import semver from 'semver';
 import { runtimeDir } from '../dirs.mjs';
+import escapeRE from 'escape-string-regexp';
+import MagicString from 'magic-string';
+import { findStaticImports, parseStaticImport } from 'mlly';
+import { createUnplugin } from 'unplugin';
 import 'node:path';
 import 'node:url';
 
+const HELPER_NAME = "__nuxtTimelineWrap";
+const RENAME_PREFIX = "_$__";
+const RUNTIME_DIR_RE = new RegExp(`^${escapeRE(runtimeDir)}`);
+function importKey(source, name) {
+  return `${source}\0${name}`;
+}
+function TimelineWrapPlugin(options) {
+  return createUnplugin(() => ({
+    name: "nuxt:devtools:timeline-function-wrap",
+    enforce: "post",
+    transform: {
+      filter: {
+        id: {
+          include: [/^[^?]*\.(?:m?[jt]sx?|vue)(?:$|\?)/],
+          exclude: [
+            /^\0/,
+            /[\\/]node_modules[\\/]/,
+            /[?&]macro=true/,
+            /[?&]type=(?:style|template|custom)\b/,
+            RUNTIME_DIR_RE
+          ]
+        },
+        code: { include: /\bimport\b/ }
+      },
+      async handler(code) {
+        const wrappable = await options.getWrappable();
+        if (!wrappable.size)
+          return;
+        return wrapTimelineImports(code, wrappable, options.helperPath);
+      }
+    }
+  }));
+}
+function wrapTimelineImports(code, wrappable, helperPath) {
+  if (code.includes(HELPER_NAME))
+    return;
+  const s = new MagicString(code);
+  const wrappers = [];
+  for (const imp of findStaticImports(code)) {
+    const { specifier, defaultImport, namespacedImport, namedImports } = parseStaticImport(imp);
+    let wrapped = false;
+    const importAs = (name, local) => {
+      if (!wrappable.has(importKey(specifier, name)))
+        return local;
+      wrapped = true;
+      wrappers.push(`const ${local} = ${HELPER_NAME}(${JSON.stringify(name === "default" ? local : name)}, ${RENAME_PREFIX}${local});`);
+      return RENAME_PREFIX + local;
+    };
+    const clause = [];
+    if (defaultImport)
+      clause.push(importAs("default", defaultImport));
+    if (namespacedImport)
+      clause.push(`* as ${namespacedImport}`);
+    const named = Object.entries(namedImports ?? {}).map(([name, local]) => {
+      const bound = importAs(name, local);
+      return name === bound ? name : `${name} as ${bound}`;
+    });
+    if (named.length)
+      clause.push(`{ ${named.join(", ")} }`);
+    if (!wrapped)
+      continue;
+    const clauseStart = imp.start + imp.code.indexOf(imp.imports);
+    s.overwrite(clauseStart, clauseStart + imp.imports.length, `${clause.join(", ")} `);
+  }
+  if (!wrappers.length)
+    return;
+  s.prepend([
+    `import { ${HELPER_NAME} } from ${JSON.stringify(helperPath)};`,
+    ...wrappers,
+    ""
+  ].join("\n"));
+  return {
+    code: s.toString(),
+    map: s.generateMap({ hires: "boundary" })
+  };
+}
+
 const DEFINE_UPPER_RE = /^define[A-Z]/;
 function setup({ nuxt, options }) {
   const helperPath = resolve(runtimeDir, "function-metrics-helpers");
@@ -22,51 +103,31 @@ function setup({ nuxt, options }) {
     if (item.type)
       return false;
     const name = item.as || item.name;
-    if (!include.some((f) => typeof f === "function" ? f(item) : typeof f === "string" ? name === f : f.test(name)))
+    if (!include.some((f) => typeof f === "function" ? f(item) : typeof f === "string" ? name === f : f.test(name))) {
       return false;
-    if (exclude.some((f) => typeof f === "function" ? f(item) : typeof f === "string" ? name === f : f.test(name)))
+    }
+    if (exclude.some((f) => typeof f === "function" ? f(item) : typeof f === "string" ? name === f : f.test(name))) {
       return false;
+    }
     return true;
   }
-  nuxt.hook("imports:context", (unimport) => {
-    const ctx = unimport.getInternalContext();
-    if (!ctx.version || !semver.gte(ctx.version, "3.1.0"))
-      throw new Error(`[Nuxt DevTools] The timeline feature requires \`unimport\` >= v3.1.0, but got \`${ctx.version || "(unknown)"}\`. Please upgrade using \`nuxi upgrade --force\`.`);
-    ctx.addons.push(
-      {
-        injectImportsResolved(imports, _code, id) {
-          if (id?.includes("?macro=true"))
-            return;
-          return imports.map((i) => {
-            if (!filter(i))
-              return i;
-            const name = i.as || i.name;
-            return {
-              ...i,
-              meta: {
-                wrapperOriginalAs: name
-              },
-              as: `_$__${name}`
-            };
-          });
-        },
-        injectImportsStringified(str, imports, s, id) {
-          if (id?.includes("?macro=true"))
-            return;
-          const code = s.toString();
-          const injected = imports.filter((i) => i.meta?.wrapperOriginalAs);
-          if (injected.length) {
-            const result = [
-              str,
-              code.includes("__nuxtTimelineWrap") ? "" : `import { __nuxtTimelineWrap } from ${JSON.stringify(helperPath)}`,
-              ...injected.map((i) => `const ${i.meta.wrapperOriginalAs} = __nuxtTimelineWrap(${JSON.stringify(i.name)}, ${i.as})`),
-              ""
-            ].join(";");
-            return result;
-          }
-        }
-      }
+  let unimport;
+  nuxt.hook("imports:context", (ctx) => {
+    unimport = ctx;
+  });
+  async function getWrappable() {
+    if (!unimport)
+      return /* @__PURE__ */ new Set();
+    const imports = await unimport.getImports();
+    const factoryNames = new Set(nuxt.options.optimization.keyedComposableFactories?.map((f) => f.name));
+    return new Set(
+      imports.filter((i) => filter(i) && !factoryNames.has(i.name)).map((i) => importKey(i.from, i.name))
     );
+  }
+  nuxt.hook("modules:done", () => {
+    nuxt.hook("build:before", () => {
+      addBuildPlugin(TimelineWrapPlugin({ helperPath, getWrappable }));
+    });
   });
 }
 

package/dist/chunks/vite-inspect.mjs

@@ -1,64 +1,100 @@
-import { addCustomTab } from '@nuxt/devtools-kit';
-import { addVitePlugin } from '@nuxt/kit';
+import { onDevtoolsReady } from '@nuxt/devtools-kit';
+import { addVitePlugin, logger } from '@nuxt/kit';
+import { createInstallLauncher } from '@vitejs/devtools-kit/node';
+import { isPackageExists } from 'local-pkg';
+import { R as RPC_NAMESPACE } from './module-main.mjs';
+import 'node:os';
+import 'consola/utils';
+import 'devframe/utils/serve-static';
+import 'pathe';
+import 'verkit';
+import 'vite';
+import '../shared/devtools-nightly.DnJkSJYB.mjs';
+import '../dirs.mjs';
+import 'node:path';
+import 'node:url';
+import 'node:child_process';
+import 'node:fs';
+import 'node:fs/promises';
+import 'node:util';
+import 'tinyglobby';
+import 'destr';
+import '../../dist/runtime/shared/hooks.js';
+import 'devframe/utils/hash';
+import 'magicast';
+import 'magicast/helpers';
+import 'node:process';
+import 'node:module';
+import '@vitejs/devtools-kit/constants';
+import 'perfect-debounce';
 
-const DOUBLE_SLASH_RE = /\/\//g;
 const VERSION_QUERY_RE = /\?v=\w+$/;
 const VUE_EXT_RE = /\.vue($|\?v=)/;
+const INSPECT_DOCK_ID = "vite-plugin-inspect";
+const INSPECT_DOCK_TITLE = "Inspect";
+const INSPECT_DOCK_ICON = "ph:magnifying-glass-duotone";
+function isVitePluginInspectAvailable(rootDir) {
+  return isPackageExists("vite-plugin-inspect", {
+    paths: [rootDir]
+  });
+}
 async function createVitePluginInspect(options) {
   return await import('vite-plugin-inspect').then((r) => r.default(options));
 }
-async function setup({ nuxt, rpc }) {
+async function setup(ctx) {
+  if (!isVitePluginInspectAvailable(ctx.nuxt.options.rootDir)) {
+    addVitePlugin(createInstallLauncher({
+      id: INSPECT_DOCK_ID,
+      title: INSPECT_DOCK_TITLE,
+      icon: INSPECT_DOCK_ICON,
+      label: "Vite Inspect",
+      install: ["vite-plugin-inspect"]
+    }));
+    return;
+  }
   const plugin = await createVitePluginInspect();
   addVitePlugin(plugin);
-  let api;
-  nuxt.hook("vite:serverCreated", () => {
-    api = plugin.api;
-  });
-  addCustomTab(() => ({
-    name: "builtin-vite-inspect",
-    title: "Inspect",
-    icon: "carbon-ibm-watson-discovery",
-    category: "advanced",
-    view: {
-      type: "iframe",
-      src: `${nuxt.options.app.baseURL}${nuxt.options.app.buildAssetsDir}/__inspect/`.replace(DOUBLE_SLASH_RE, "/")
-    }
-  }), nuxt);
-  async function getComponentsRelationships() {
-    const meta = await api?.rpc.getMetadata();
-    const modules = (meta && meta.instances[0] ? await api?.rpc.getModulesList({
-      vite: meta.instances[0].vite,
-      env: meta.instances[0].environments[0]
-    }) : null) || [];
-    const components = await rpc.functions.getComponents() || [];
-    const vueModules = modules.filter((m) => {
-      const plainId = m.id.replace(VERSION_QUERY_RE, "");
-      if (components.some((c) => c.filePath === plainId))
-        return true;
-      return m.id.match(VUE_EXT_RE);
-    });
-    const graph = vueModules.map((i) => {
-      function searchForVueDeps(id, seen = /* @__PURE__ */ new Set()) {
-        if (seen.has(id))
-          return [];
-        seen.add(id);
-        const module = modules.find((m) => m.id === id);
-        if (!module)
-          return [];
-        return module.deps.flatMap((i2) => {
-          if (vueModules.some((m) => m.id === i2))
-            return [i2];
-          return searchForVueDeps(i2, seen);
-        });
+  onDevtoolsReady((kit) => {
+    async function getComponentsRelationships() {
+      if (!kit.rpc.has("vite-plugin-inspect:get-metadata")) {
+        logger.warn("[nuxt-devtools] vite-plugin-inspect RPC functions not registered, component relationships unavailable");
+        return [];
       }
-      return {
-        id: i.id,
-        deps: searchForVueDeps(i.id)
-      };
-    });
-    return graph;
-  }
-  rpc.functions.getComponentsRelationships = getComponentsRelationships;
+      const meta = await kit.rpc.invokeLocal("vite-plugin-inspect:get-metadata");
+      const modules = (meta && meta.instances[0] ? await kit.rpc.invokeLocal("vite-plugin-inspect:get-modules-list", {
+        vite: meta.instances[0].vite,
+        env: meta.instances[0].environments[0]
+      }) : null) || [];
+      const components = await kit.rpc.invokeLocal(`${RPC_NAMESPACE}:getComponents`) || [];
+      const vueModules = modules.filter((m) => {
+        const plainId = m.id.replace(VERSION_QUERY_RE, "");
+        if (components.some((c) => c.filePath === plainId))
+          return true;
+        return m.id.match(VUE_EXT_RE);
+      });
+      const graph = vueModules.map((i) => {
+        function searchForVueDeps(id, seen = /* @__PURE__ */ new Set()) {
+          if (seen.has(id))
+            return [];
+          seen.add(id);
+          const module = modules.find((m) => m.id === id);
+          if (!module)
+            return [];
+          return module.deps.flatMap((i2) => {
+            if (vueModules.some((m) => m.id === i2))
+              return [i2];
+            return searchForVueDeps(i2, seen);
+          });
+        }
+        return {
+          id: i.id,
+          deps: searchForVueDeps(i.id)
+        };
+      });
+      return graph;
+    }
+    kit.rpc.register({ name: `${RPC_NAMESPACE}:getComponentsRelationships`, handler: getComponentsRelationships }, true);
+  }, ctx.nuxt);
 }
 
-export { createVitePluginInspect, setup };
+export { createVitePluginInspect, isVitePluginInspectAvailable, setup };

package/dist/chunks/vue-devtools.mjs

@@ -1,17 +1,60 @@
-import { addPluginTemplate, resolvePath } from '@nuxt/kit';
-import { join } from 'pathe';
-import { runtimeDir } from '../dirs.mjs';
+import { addVitePlugin, addPluginTemplate } from '@nuxt/kit';
+import { vueDevtools } from 'vite-plugin-vue-devtools';
+import { s as skipInSSR } from './module-main.mjs';
+import 'node:os';
+import '@nuxt/devtools-kit';
+import 'consola/utils';
+import 'devframe/utils/serve-static';
+import 'pathe';
+import 'verkit';
+import 'vite';
+import '../shared/devtools-nightly.DnJkSJYB.mjs';
+import '../dirs.mjs';
 import 'node:path';
 import 'node:url';
+import 'node:child_process';
+import 'node:fs';
+import 'node:fs/promises';
+import 'node:util';
+import 'tinyglobby';
+import 'destr';
+import '../../dist/runtime/shared/hooks.js';
+import 'devframe/utils/hash';
+import 'magicast';
+import 'magicast/helpers';
+import 'node:process';
+import 'node:module';
+import 'local-pkg';
+import '@vitejs/devtools-kit/constants';
+import 'perfect-debounce';
 
-async function setup({ nuxt }) {
+function setup({ nuxt }) {
   if (!nuxt.options.dev || nuxt.options.test)
     return;
+  const plugins = vueDevtools().map((plugin) => {
+    const { devtools } = plugin;
+    if (!devtools?.setup)
+      return plugin;
+    return {
+      ...plugin,
+      devtools: {
+        ...devtools,
+        setup: (ctx) => skipInSSR(ctx) ? void 0 : devtools.setup(ctx)
+      }
+    };
+  });
+  addVitePlugin(plugins);
   addPluginTemplate({
+    filename: "devtools/vue-devtools-client.mjs",
     name: "vue-devtools-client",
     mode: "client",
     order: -1e3,
-    src: await resolvePath(join(runtimeDir, "vue-devtools-client"))
+    getContents: () => [
+      `import 'virtual:vue-devtools-client'`,
+      ``,
+      `export default () => {}`,
+      ``
+    ].join("\n")
   });
 }
 

package/dist/dirs.d.mts

@@ -1,6 +1,4 @@
 declare const packageDir: string;
-declare const distDir: string;
 declare const runtimeDir: string;
-declare const clientDir: string;
 
-export { clientDir, distDir, packageDir, runtimeDir };
+export { packageDir, runtimeDir };

package/dist/dirs.mjs

@@ -2,8 +2,6 @@ import { resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
 const packageDir = resolve(fileURLToPath(import.meta.url), "../..");
-const distDir = resolve(fileURLToPath(import.meta.url), "..");
-const runtimeDir = resolve(distDir, "runtime");
-const clientDir = resolve(distDir, "client");
+const runtimeDir = resolve(fileURLToPath(import.meta.url), "../runtime");
 
-export { clientDir, distDir, packageDir, runtimeDir };
+export { packageDir, runtimeDir };

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import './shared/devtools-nightly.LsRDzDTD.mjs';
+import './shared/devtools-nightly.DIKI0iiX.mjs';
 import { ModuleOptions } from '@nuxt/devtools-kit/types';
 export { ModuleOptions } from '@nuxt/devtools-kit/types';
 

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@nuxt/devtools",
   "configKey": "devtools",
-  "version": "3.2.4-29563482.f9a1d97",
+  "version": "4.0.0-29884714.dcb247f",
   "builder": {
-    "@nuxt/module-builder": "1.0.2",
+    "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"
   }
 }

package/dist/module.mjs

@@ -1,2 +1,2 @@
 import '@nuxt/kit';
-export { m as default } from './shared/devtools-nightly.COlX0Gls.mjs';
+export { m as default } from './shared/devtools-nightly.DnJkSJYB.mjs';

package/dist/runtime/plugins/devtools.client.d.ts

@@ -1,2 +1,3 @@
-declare const _default: any;
-export default _default;
+import type { Plugin } from 'nuxt/app';
+declare const plugin: Plugin;
+export default plugin;

package/dist/runtime/plugins/devtools.client.js

@@ -1,16 +1,12 @@
-import { defineNuxtPlugin, useRouter, useState } from "#imports";
 import { shallowReactive, watchEffect } from "vue";
+import { defineNuxtPlugin, useRouter, useState } from "#imports";
 import { setupHooksDebug } from "../shared/hooks.js";
-export default defineNuxtPlugin((nuxt) => {
+const plugin = defineNuxtPlugin((nuxt) => {
   if (typeof document === "undefined" || typeof window === "undefined")
     return;
   try {
     if (window.__NUXT_DEVTOOLS_DISABLE__ || window.parent?.__NUXT_DEVTOOLS_DISABLE__)
       return;
-    if (parent && window.self !== parent) {
-      if (parent.__NUXT_DEVTOOLS_VIEW__)
-        return;
-    }
   } catch (e) {
     console.error("Nuxt DevTools: Failed to check parent window");
     console.error(e);
@@ -54,3 +50,4 @@ export default defineNuxtPlugin((nuxt) => {
     );
   });
 });
+export default plugin;

package/dist/runtime/plugins/view/client.js

@@ -1,16 +1,14 @@
-import { useAppConfig, useRuntimeConfig } from "#imports";
+import { getDevframeClientContext } from "@devframes/hub/client";
 import { NuxtDevtoolsInspectPanel } from "@nuxt/devtools/webcomponents";
-import { getDevToolsClientContext } from "@vitejs/devtools-kit/client";
-import { setIframeServerContext } from "@vue/devtools-kit";
 import { createHooks } from "hookable";
 import { debounce } from "perfect-debounce";
 import { events as inspectorEvents, hasData as inspectorHasData, state as inspectorState } from "vite-plugin-vue-tracer/client/overlay";
 import { computed, markRaw, nextTick, reactive, ref, shallowReactive, shallowRef, toRef, watch } from "vue";
+import { useAppConfig } from "#imports";
 import { initTimelineMetrics } from "../../function-metrics-helpers.js";
-import { state } from "./state.js";
-const MULTIPLE_SLASHES_RE = /\/+/g;
-function getViteDevToolsContext() {
-  return getDevToolsClientContext();
+const NUXT_DOCK_ANCHOR_ID = "nuxt:devtools";
+function getDevframeContext() {
+  return getDevframeClientContext();
 }
 const clientRef = shallowRef();
 export { clientRef as client };
@@ -20,7 +18,6 @@ export async function setupDevToolsClient({
   timeMetric,
   router
 }) {
-  let iframe;
   let inspector;
   const colorMode = useClientColorMode();
   const timeline = initTimelineMetrics();
@@ -28,31 +25,29 @@ export async function setupDevToolsClient({
     nuxt: markRaw(nuxt),
     hooks: createHooks(),
     inspector: getInspectorInstance(),
-    getIframe,
-    syncClient,
     devtools: {
       toggle() {
-        const ctx = getViteDevToolsContext();
+        const ctx = getDevframeContext();
         if (ctx)
-          ctx.docks.toggleEntry("nuxt:devtools");
+          ctx.docks.toggleEntry(NUXT_DOCK_ANCHOR_ID);
       },
       close() {
-        const ctx = getViteDevToolsContext();
+        const ctx = getDevframeContext();
         if (ctx)
-          ctx.panel.store.value.open = false;
+          ctx.panel.session.open = false;
       },
       open() {
-        const ctx = getViteDevToolsContext();
+        const ctx = getDevframeContext();
         if (ctx) {
-          ctx.panel.store.value.open = true;
-          ctx.docks.switchEntry("nuxt:devtools");
+          ctx.panel.session.open = true;
+          ctx.docks.switchEntry(NUXT_DOCK_ANCHOR_ID);
         }
       },
       async navigate(path) {
-        const ctx = getViteDevToolsContext();
+        const ctx = getDevframeContext();
         if (ctx) {
-          ctx.panel.store.value.open = true;
-          ctx.docks.switchEntry("nuxt:devtools");
+          ctx.panel.session.open = true;
+          ctx.docks.switchEntry(NUXT_DOCK_ANCHOR_ID);
         }
         await client.hooks.callHook("host:action:navigate", path);
       },
@@ -72,7 +67,6 @@ export async function setupDevToolsClient({
           router.push(path);
       },
       colorMode,
-      frameState: state,
       $fetch: globalThis.$fetch
     },
     metrics: {
@@ -84,64 +78,6 @@ export async function setupDevToolsClient({
     revision: ref(0)
   });
   window.__NUXT_DEVTOOLS_HOST__ = client;
-  function syncClient() {
-    if (!client.inspector)
-      client.inspector = getInspectorInstance();
-    try {
-      iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__?.setClient(client);
-    } catch (e) {
-      console.error("[nuxt-devtools] Failed to connect view", e);
-    }
-    return client;
-  }
-  function getIframe() {
-    if (!iframe) {
-      const runtimeConfig = useRuntimeConfig();
-      const CLIENT_BASE = "/__nuxt_devtools__/client";
-      const CLIENT_PATH = `${runtimeConfig.app.baseURL.replace(CLIENT_BASE, "/")}${CLIENT_BASE}`.replace(MULTIPLE_SLASHES_RE, "/");
-      const initialUrl = CLIENT_PATH + state.value.route;
-      iframe = document.createElement("iframe");
-      for (const [key, value] of Object.entries(runtimeConfig.app.devtools?.iframeProps || {}))
-        iframe.setAttribute(key, String(value));
-      iframe.id = "nuxt-devtools-iframe";
-      iframe.src = initialUrl;
-      iframe.onload = async () => {
-        try {
-          setIframeServerContext(iframe);
-          await waitForClientInjection();
-          client.syncClient();
-        } catch (e) {
-          console.error("Nuxt DevTools client injection failed");
-          console.error(e);
-        }
-      };
-    }
-    return iframe;
-  }
-  function waitForClientInjection(retry = 20, timeout = 300) {
-    let lastError;
-    const test = () => {
-      try {
-        return !!iframe?.contentWindow?.__NUXT_DEVTOOLS_VIEW__;
-      } catch (e) {
-        lastError = e;
-      }
-      return false;
-    };
-    if (test())
-      return;
-    return new Promise((resolve, reject) => {
-      const interval = setInterval(() => {
-        if (test()) {
-          clearInterval(interval);
-          resolve();
-        } else if (retry-- <= 0) {
-          clearInterval(interval);
-          reject(lastError);
-        }
-      }, timeout);
-    });
-  }
   function getInspectorInstance() {
     if (inspector)
       return inspector;
@@ -318,7 +254,4 @@ function setupReactivity(client, router, timeMetric) {
   client.nuxt.hook("app:mounted", () => {
     refreshReactivity();
   });
-  client.hooks.hook("devtools:navigate", (path) => {
-    state.value.route = path;
-  });
 }

package/dist/runtime/plugins/vite-devtools.client.js

@@ -1,4 +1,8 @@
+import { DEVTOOLS_MOUNT_PATH } from "@vitejs/devtools-kit/constants";
 import { defineNuxtPlugin } from "#imports";
 export default defineNuxtPlugin(() => {
-  import("@vitejs/devtools/client/inject");
+  const script = document.createElement("script");
+  script.type = "module";
+  script.src = `${DEVTOOLS_MOUNT_PATH}embedded.js`;
+  document.body.appendChild(script);
 });

package/dist/runtime/shared/hooks.d.ts

@@ -1,3 +1,11 @@
 import type { HookInfo } from '@nuxt/devtools/types';
-import type { Hookable } from 'hookable';
-export declare function setupHooksDebug<T extends Hookable<any>>(hooks: T): Record<string, HookInfo>;
+interface HookableLike {
+    beforeEach: (fn: (event: {
+        name: string;
+    }) => void) => void;
+    afterEach: (fn: (event: {
+        name: string;
+    }) => void) => void;
+}
+export declare function setupHooksDebug<T extends HookableLike>(hooks: T): Record<string, HookInfo>;
+export {};