Getting Started
Installation
Auto Install
You just need to go to your nuxt.config
file and set devtools
to true
:
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
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.
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
export default defineNuxtConfig({
modules: [
'@nuxt/devtools',
],
})
Edge Release Channel
Similar to Nuxt's Edge Channel, DevTools also offers an edge release channel, that automatically releases for every commit to main
branch.
You can opt-in to the edge release channel by running:
{
"devDependencies": {
-- "@nuxt/devtools": "^0.1.0"
++ "@nuxt/devtools": "npm:@nuxt/devtools-edge@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.