New Nuxt DevTools is mindblowing! 🤯
Tags: nuxt, vue, webdev, javascript
Published: 2023-02-10 08:30:00

## 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 <a href="https://github.com/nuxt/devtools" target="_blank">Nuxt DevTools</a>! 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!
```bash
npm i -D @nuxt/devtools
```

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

```ts
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.

![Nuxt Devtools button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f2zuid6ix4xcy83170i.png)

This is how it looks upon expanding:

![Nuxt devtools welcome screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9vavfkr7aoibeuy6ydu9.png)

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.

![Nuxt devtools pages screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83nl1h9qflijwhsoh7sk.png)

### 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!

![Nuxt devtools components screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8w8kh0jtizhnpn5fs9hb.png)

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

![Nuxt devtools components graph screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unk8bfmjqmctvayhgdhz.png)

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.

![Nuxt devtools imports screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0lqdr82mjiop2h86sj3x.png)

### Modules

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

![Nuxt devtools module screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9c2oiogw53i9s26g4t0j.png)

### Plugins

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

![Nuxt devtools plugins screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k97qltjjkb2u4fhmhz31.png)

### 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. 

![Nuxt devtools hooks screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zpdxc8sh4vf77lcqkx4d.png)

### Inspect

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

![Nuxt devtools inspect screen](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xhi1grr1ga8pvcvf5tl.png)

## 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!