Nuxt DevTools

Nuxt DevTools is the floating Nuxt logo at the bottom-left of every dev page. It’s the fastest way to understand what your app is actually doing — which routes exist, which modules ran, what the payload looks like.

Opening It

• Click the floating Nuxt logo, or
• Press Shift + Alt + D (Cmd on macOS keyboards both work)

The panel slides up over your page. Drag the divider to resize.

The Tabs

• Pages — every route, with a one-click open in your editor
• Components — tree of registered components and where they’re auto-imported from
• Imports — every composable, util, and component name available in your app
• Modules — installed modules with config, docs links, and one-click upgrade
• Plugins — execution order of your plugins
• Server Routes — every server/api/* endpoint, with a built-in tester
• Hooks — lifecycle hooks fired, in order, with timings
• Assets — public/ folder browsed visually
• Timeline — render and data-fetch waterfall for the current page
• VS Code Launcher — jump to any file in your editor

A Practical Workflow

Add a feature and DevTools is how you sanity-check it.

# Add a module
nuxi module add @nuxt/image
# Reload dev — DevTools' Modules tab shows it installed
# Imports tab shows <NuxtImg> is now available

Disabling It

If a teammate finds the panel distracting, disable globally or per-developer.

// nuxt.config.ts — disable for everyone
export default defineNuxtConfig({
  devtools: { enabled: false },
})

Per-developer, set NUXT_DEVTOOLS_DISABLE_LOCAL_STORAGE=true in your shell, or click the gear icon inside the panel and toggle it off.

Production

DevTools never ship to production — they’re stripped from the nuxi build output entirely.