Nuxt DevTools Preview
Unleash Nuxt Developer Experience.
Nuxt DevTools is a set of visual tools that help you to know your app better.
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 enableRestart 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
nvmor 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 disableInstall 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',
],
})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.ts
export 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
Module Authors
Please refer to the Module Authors Guide.
Contribution Guide
Please refer to the Contribution Guide.