Use Nuxt DevTools to Know Your App Better

Hi 👋

Last week I started a new project as a freelancer at ROLLER. They are replacing the old shop website with Nuxt 3 and need support. I'm excited; it's my first time working in eCommerce.

My talk "ref() vs. reactive(): What to choose using Vue 3 Composition API?" has been selected for the line-up of Vue.js Live 2023 😮

Additionally, you can now sponsor this newsletter.

Have a lovely week ☀️

To support me:

• 😘 Recommend the newsletter to your friends: it really helps!
• 💸 Sponsor the newsletter
• 🧵 Retweet the latest Twitter thread
• 📨 Reply to this email: feedback is welcome

Nuxt DevTools is experimental and under heavy development. APIs are subject to change.

You need Nuxt v3.1.0 or higher to use DevTools.

Installation

To enable Nuxt DevTools you can opt-in per project by running the following command:

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.

Next, you need to restart your Nuxt server and open it in your browser.

To toggle the DevTools, you can either click the Nuxt icon at the bottom of the browser window or press Alt / ⌥ Option + D:

Features

Nuxt DevTools is a set of visual tools available right inside your app.

Here is a list of the current features:

• Pages: The pages tab shows your current routes and provides a quick way to navigate them.
• Components: Components tab shows all the components you are using in your app and where they are from.
• Imports: Imports tab shows all the auto-imports registered to Nuxt.
• Modules: Modules tab shows all the modules you have installed and the links to their documentation.
• Hooks: Hooks tab can help you to monitor the time spent in each hook to identify performance bottlenecks.
• Virtual Files: Virtual Files tab shows the virtual files generated by Nuxt to support the conventions.
• Inspect: Inspect expose the vite-plugin-inspect integration, allowing you to inspect the transformation steps of Vite.

Check the official docs to get more details about the features. The official roadmap is also interesting.

Disable DevTools

Of course, you can disable DevTools per project by running:

Until next week,