Migration to v4

Breaking changes and migration guide for Nuxt DevTools v4.

startSubprocess() API Changes

The subprocess system has been migrated from execa to tinyexec.

SubprocessOptions no longer extends ExecaOptions

Previously, SubprocessOptions extended ExecaOptions from execa, allowing you to pass any execa option directly. It now has its own interface:

interface SubprocessOptions {
  command: string
  args?: string[]
  cwd?: string
  env?: Record<string, string | undefined>
  nodeOptions?: SpawnOptions // from 'node:child_process'
}

Common fields like cwd and env are still available as top-level options. Other execa-specific options should be migrated to nodeOptions (Node.js SpawnOptions):

startSubprocess({
  command: 'my-command',
  args: ['--flag'],
  cwd: '/some/path',
- stdio: 'pipe',
+ nodeOptions: {
+   stdio: 'pipe',
+ },
})

getProcess() is deprecated

The return value of startSubprocess() now provides getResult() instead of getProcess().

  • getProcess() still works but logs a deprecation warning and returns ChildProcess | undefined (was ExecaChildProcess<string>)
  • getResult() returns a tinyexec Result object with .kill(), .process, .pipe(), and more
const subprocess = startSubprocess(/* ... */)

- const proc = subprocess.getProcess()
- proc.stdout.on('data', handler)
+ const result = subprocess.getResult()
+ result.process?.stdout?.on('data', handler)

Global Install Support Removed

Nuxt DevTools no longer supports being installed globally.

  • The devtoolsGlobal Nuxt config option (with projects whitelist) is no longer supported
  • The -g flag is no longer used when installing/uninstalling @nuxt/devtools via the DevTools UI
  • The isGlobalInstall property has been removed from NuxtDevtoolsInfo

@nuxt/devtools-wizard Package and nuxi devtools Removed

The @nuxt/devtools-wizard package, its CLI, and the nuxi devtools enable/disable subcommand have been removed. DevTools is shipped with Nuxt — to enable or disable it, update your nuxt.config.ts directly:

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

runWizard RPC Removed

The runWizard server RPC function has been removed from ServerFunctions. The enablePages action is now available as a direct RPC function:

- await rpc.runWizard(token, 'enablePages')
+ await rpc.enablePages(token)

The WizardFunctions, WizardActions, and GetWizardArgs types have been removed from @nuxt/devtools-kit.

Vite DevTools Integration is Now Always Enabled

The viteDevTools module option has been removed. Nuxt DevTools now always integrates with Vite DevTools as a dock entry. The built-in floating panel has been removed — DevTools is accessed through the Vite DevTools panel instead.

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

client.devtools Methods Now Control Vite DevTools

The client.devtools.open(), client.devtools.close(), and client.devtools.toggle() methods still work but now control the Vite DevTools panel:

  • open() opens the Vite DevTools panel and switches to the Nuxt DevTools dock entry
  • close() closes the Vite DevTools panel
  • toggle() toggles the Nuxt DevTools dock entry in the Vite DevTools panel

The Shift+Alt+D keyboard shortcut now toggles the Nuxt DevTools entry in the Vite DevTools panel.

client.devtools.popup Removed

The Picture-in-Picture popup feature (client.devtools.popup) has been removed. This was an experimental feature that required Chrome 111+.

showPanel and minimizePanelInactive Settings Removed

The showPanel and minimizePanelInactive UI settings have been removed from NuxtDevToolsOptions as the built-in floating panel no longer exists.