Skip to content

nuxt/devtools

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Feb 18, 2025
d018045 Β· Feb 18, 2025
Feb 5, 2025
Aug 26, 2024
Feb 16, 2025
Feb 18, 2025
Feb 16, 2025
Jan 9, 2025
Jul 14, 2022
Jan 14, 2025
Jun 21, 2023
Mar 20, 2024
Feb 16, 2025
Oct 7, 2023
Jan 23, 2023
Jan 9, 2025
Sep 20, 2024
Nov 28, 2024
Feb 18, 2025
Feb 18, 2025
Feb 18, 2025
Jan 18, 2025
Jan 18, 2025
Oct 11, 2023
Sep 27, 2023
Feb 24, 2023

Repository files navigation

Nuxt DevTools

Nuxt DevTools

npm version npm downloads License Nuxt Volta

Unleash Nuxt Developer Experience.
Nuxt DevTools is a set of visual tools that help you to know your app better.

πŸ‘‹ Introduction | πŸ’‘ Ideas & Suggestions | πŸ—ΊοΈ Project Roadmap | πŸ“š Documentation


Note

You are viewing the v2.x branch which are in active development. For the latest stable version, please refer to the v1.x branch

Installation

Nuxt DevTools v2 requires Nuxt v3.15.0 or higher.

Nuxt DevTools is enabled by default in Nuxt v3.8.0. You can press Shift + Alt / ⇧ Shift + βŒ₯ Option + D in your app to open it up.

If you want to explicitly enable or disable Nuxt DevTools, you can update your nuxt.config with:

export default defineNuxtConfig({
  devtools: {
    enabled: true // or false to disable
  }
})

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.

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.

Anonymous Usage Analytics

Nuxt DevTools collects anonymous telemetry data about general usage. This helps us to accurately gauge feature usage and customization across all our users. This data will let us better understand how each features in Nuxt DevTools are used, measuring improvements made (DX and performances) and their relevance. It would also help us to prioritize our efforts and focus on the features that matter the most to our users.

Nuxt DevTools' telemetry data is piped through Nuxt Telemetry, meaning that Nuxt DevTools will respect your local and global Nuxt Telemetry settings. You can also opt-out Nuxt DevTools' telemetry in the Nuxt DevTools settings.

The data we collect is completely anonymous, not traceable to the source (using hash+seed), and only meaningful in aggregate form. No data we collect is personally identifiable or trackable.

Events

On top of the default Nuxt Telemetry events, Nuxt DevTools also collects the following events:

  • Versions of Nuxt DevTools
  • Navigations between tabs/feature
    • This helps us to understand which features are used the most to prioritize our efforts.
  • Browser and OS names and versions
    • This helps us improve compatibility across different browsers and operating systems.
  • Click event on some action buttons

License

MIT