Michael Hoffmann LogoMichael Hoffmann
·
1 min read

Nuxt Tip: Use DevTools to Know Your App Better

Nuxt Tip: Use DevTools to Know Your App Better Image
Nuxt

Warning

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:

bash
npx nuxi@latest devtools enable

Info

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:

Nuxt DevTools Toggle Button

You should then see the start screen of the DevTools:

Nuxt DevTools Start Screen

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 show 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 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:

bash
npx nuxi@latest devtools disable

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.

Vue Tip: Re-Rendering Vue Routes When Path Parameters Change

In SPA that uses the Vue Router, it’s common to create a path parameter that changes the behavior of a route.

Vue Tip: Use Scoped Slots in a Child Component to Provide Data for Parent Component

A Scoped Slot in a child component can provide data for presentation in the parent component using a slot.