devtools
Go to documentationUnleash Nuxt Developer Experience. A set of visual tools that help you to know your app better.
Nuxt DevTools Preview
Unleash Nuxt Developer Experience.
Nuxt DevTools is a set of visual tools that help you to know your app better.
💡 Ideas & Suggestions | 🗺️ Project Roadmap | 📚 Documentation
Warning: Experimental and under heavy development. APIs are subject to change.
Installation
Nuxt DevTools requires Nuxt v3.1.0 or higher.
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.
Note: If you using
nvm
or other Node version managers, we suggest to run the enable command again after switching Node version.
When you run nuxi devtools enable
, Nuxt DevTools will be installed as a global module and only activated for the projects you enabled. The configuration will be saved in your local ~/.nuxtrc
file, so it doesn't affect your team unless they also opt-in.
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.tsexport 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.
// nuxt.config.tsexport default defineNuxtConfig({ modules: [ '@nuxt/devtools', ], 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.
Features
Read the Announcement Blog Post 🎊 for why we built Nuxt DevTools and what it can do!
Module Authors
Please refer to the Module Authors Guide.
Contribution Guide
Please refer to the Contribution Guide.