Guide

Getting Started

Nuxt DevTools is shipped with Nuxt. Enable it in your config to get started.

Installation

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

nuxt.config.ts
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.

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.