Getting Started

Installation

Nuxt DevTools is shipped with Nuxt. To enable it, set devtools to true in your nuxt.config:

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

Open the DevTools Panel

Restart your Nuxt server and open your app in browser. Click the Nuxt icon on the bottom (or press SHIFT + ALT / ⇧ SHIFT + ⌥ OPTION + D) to toggle the DevTools.

Opting in to v4.0

Nuxt DevTools v4.0 is currently in alpha. Since Nuxt ships with a built-in version of DevTools, you can opt-in to v4.0 by using package manager resolutions to override the bundled version:

{
  "overrides": {
    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
  }
}

{
  "resolutions": {
    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
  }
}

{
  "pnpm": {
    "overrides": {
      "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
    }
  }
}

Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

Nightly Release Channel

Similar to Nuxt's Nightly Channel, DevTools also offers a nightly release channel, that automatically releases for every commit to main branch.

You can opt-in to the nightly release channel by using package manager resolutions:

{
  "overrides": {
    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
  }
}

{
  "resolutions": {
    "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
  }
}

{
  "pnpm": {
    "overrides": {
      "@nuxt/devtools": "npm:@nuxt/devtools-nightly@latest"
    }
  }
}

Remove lockfile (package-lock.json, yarn.lock, or pnpm-lock.yaml) and reinstall dependencies.

Module Options

To configure Nuxt DevTools, you can pass the devtools options.

export default defineNuxtConfig({
  devtools: {
    // Enable devtools (default: true)
    enabled: true,
    // VS Code Server options
    vscode: {},
    // ...other options
  }
})

For all options available, please refer to TSDocs in your IDE, or the type definition file.