Upgrading to v4

Nuxt DevTools v4 is built on Vite DevTools. Instead of shipping its own floating panel, it registers a Nuxt group inside the Vite DevTools panel, next to Vue DevTools, Vite Inspect, Terminals, Messages and the other tools your Vite plugins provide. Everything you know from the Nuxt side (Pages, Components, Imports, Modules, Server Routes, Timeline, …) lives in that group.

This page is for app developers. If you maintain a Nuxt module that integrates with DevTools, read the module migration guide as well.

Requirements

• Vite 8.1.5 or later. Vite DevTools only works with Vite 8.
• That means Nuxt 4.5 or later, or Nuxt 5. Nuxt 4.0–4.4 ship Vite 7 and cannot run DevTools v4.

If you are on an older Nuxt 4, upgrade Nuxt first. Overriding vite on Nuxt 4.4 to Vite 8 is not supported.

Installing

Nuxt 5

Nuxt 5 ships with DevTools v4. There is nothing to install:

export default defineNuxtConfig({
  devtools: { enabled: true },
})

Nuxt 4.5+

Nuxt 4 still bundles DevTools v3. Override the bundled version with your package manager, then reinstall:

{
  "overrides": {
    "@nuxt/devtools": "^4.0.0"
  }
}

{
  "resolutions": {
    "@nuxt/devtools": "^4.0.0"
  }
}

{
  "pnpm": {
    "overrides": {
      "@nuxt/devtools": "^4.0.0"
    }
  }
}

Remove your lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and run the install again so the override takes effect.

Opening DevTools

The floating Nuxt button at the bottom of the page is gone; the Vite DevTools trigger takes its place. The keyboard shortcut is unchanged: SHIFT + ALT / ⇧ SHIFT + ⌥ OPTION + D toggles the Nuxt entry.

Vite DevTools can run shell commands and read files on your machine, so it asks you to authorize the browser once per project. On first open you will see an Unauthorized badge; enter the 6-digit code printed in your terminal (or click the link printed next to it). In sandboxed environments such as StackBlitz and CodeSandbox the prompt is skipped automatically. To skip it elsewhere, set devtools.disableAuthorization: true in nuxt.config.ts — only do this on a machine you trust.

To turn Vite DevTools off entirely (Nuxt DevTools included), disable it in your Vite config on Vite 8.3+:

export default defineNuxtConfig({
  vite: {
    devtools: false,
  },
})

What moved

Module tabs contributed by Nuxt modules you install (for example @nuxt/fonts, @nuxt/scripts, nuxt-og-image) keep working. They appear in the Nuxt group under the Modules category.

Configuration changes

vscode is replaced by codeServer {#code-server}

The VS Code integration is now the Code Server plugin. It supports a locally installed Coder code-server, detected when DevTools starts and launched on demand.

export default defineNuxtConfig({
  devtools: {
-   vscode: { enabled: true },
+   codeServer: { enabled: true },
  },
})

The old vscode value is ignored and a NDT_DEP_0008 warning is printed. The following v3 modes no longer exist:

• Microsoft code serve-web and code-server serve-local
• VS Code tunnels
• reusing an already running server, or starting one on boot
• the vscode-server-controller extension

The generic open in editor action (from component and file links) is unaffected. codeServer accepts enabled, bin, cwd, serverPort, host, args, env, cookieSuffix and startTimeout.

Removed options

• viteDevTools — Vite DevTools is always on; use vite.devtools: false to turn it off.
• ui.showPanel and ui.minimizePanelInactive — the floating panel no longer exists.
• devtoolsGlobal — DevTools cannot be installed globally any more.
• experimental.timeline — still honored, but use timeline.enabled instead.

New options

• vueDevTools (default true) — set to false to skip the Vue DevTools dock.
• dataInspector (default true) — set to false to skip the Data Inspector source.
• disableAuthorization (default: on in sandboxes) — skips the authorization prompt described above.

Deprecation warnings in your terminal

Lines such as [NDT_DEP_0003] extendServerRpc is deprecated come from a Nuxt module you installed, not from your app. The module keeps working; the warning tells its author which v4 API to move to. Each code links to the relevant section of the module migration guide, which is the right place to point the maintainer to.

Troubleshooting

• The dev server crashes at startup mentioning @vitejs/devtools-rolldown. You are on Vite 7 (Nuxt ≤ 4.4). Upgrade to Nuxt 4.5 or later.
• Opening /__nuxt_devtools__/client/ directly shows empty data. The client needs the connection the Vite DevTools panel gives it; open DevTools from the app page instead.
• The authorization code does not appear. It is printed by the dev server process; look in the terminal running nuxt dev, not in the browser console.