New Nuxt DevTools is mindblowing!

Nuxt DevTools has just landed

Nuxt 3 got released a few months ago but the tool I was the most curious about remained unreleased. Until now! Today, the Nuxt team has announced the release of Nuxt DevTools! The previous version of Nuxt didn't have the dedicated devtools specifically for Nuxt so I was even more curious. The tool is still in beta but it's ready to test with the freshly released Nuxt 3.2 and I have to tell you something: it's absolutely gorgeous!

Installation

First of all, you have to make sure that you have the latest version of Nuxt installed which is Nuxt 3.2.0.

Let's install this beast!

npm i -D @nuxt/devtools

and add the module to your nuxt.config.ts file:

export default defineNuxtConfig({
  modules: [
    '@nuxt/devtools',
  ],
})

Now please run the server to see Nuxt DevTools in action!

npm run dev

Quick look

When you spin up a dev server, you can notice that there is a tiny button with Nuxt logo in the bottom center of your screen. You can click it or use alt + D command to expand the DevTools panel.

This is how it looks upon expanding:

Looks awesome, isn't it? The Overview tab shows basic info about the Nuxt version, the number of pages, components, modules and plugins. Let's take a quick look at what else it has to offer.

Pages

This section of DevTools lists all pages within our application. You can also quickly change the routes by simply clicking on a specific route.

Components

The "Components" section is responsible for listing all user, runtime and built-in components. When you click on a specific component, the component file will open inside Visual Studio Code! This is so handy!

You can also switch to graph mode which shows relations between components:

How cool is that!

Imports

"Imports" is a cool way of presenting which user or built-in function are imported to our codebase. If you click on some function, you can inspect where this particular function is used.

Modules

Inside "modules", you can simply inspect which modules are available inside our app. On my example app I have pinia installed.

Plugins

This section is responsible for listing all plugins inside our Nuxt application.

Hooks

This section can be informative. It shows us how much time is spent on some hooks. This includes app hooks (like mounted, created) and other more specific hooks like links, pages, vite, etc.

Inspect

Inside this section, you can easily inspect the code for specific components, styles and additional TS files.

Summary

Vue ecosystem was always known for top-notch tooling and devtools. I think that Vue Devtools should be the industry standard and is MILES ahead of React devtools. Also, Vite, which was made by Vue creator Evan You has become an industry standard and even React community agrees that Vite should replace CRA and Webpack as the default scaffolding and bundling solution. Knowing all of that, it's not surprising that Nuxt DevTools is a top-quality product. It will help develop and debug Nuxt apps but I'm pretty sure that it's only the beginning and more interesting things will come. Great times are ahead of Vue the community!