Getting Started - Nuxt DevTools

Installation

Nuxt DevTools v2 requires Nuxt v3.15.0 or higher.

Auto Install

You just need to go to your nuxt.config file and set devtools to true:

nuxt.config.ts

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

Nuxt will automatically install the DevTools module for you.

Install using Nuxi

You can opt-in Nuxt DevTools per-project by going to the project root and run:

npx nuxi@latest devtools enable

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.

If you using nvm or other Node version managers, we suggest to run the enable command again after switching Node version.

Similarly, you can disable it per-project by running:

npx nuxi@latest devtools disable

Install Manually

Nuxt DevTools is currently provided as a module (might be changed in the future). If you prefer, you can also install it locally, which will be activated for all your team members.

npm i -D @nuxt/devtools

nuxt.config.ts

export default defineNuxtConfig({   modules: [     '@nuxt/devtools',   ], })

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 running:

{   "devDependencies": { --    "@nuxt/devtools": "^0.1.0" ++    "@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.

nuxt.config.ts

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.