Introduction

In this article we will go through the main features of Nuxt DevTools which was unveiled a couple of days ago. We will be enabling it on the Nuxt Movie App project which we did in the last article.

Follow along here:

Vue.js Amsterdam

The Vue.js Amsterdam conference was held this week and it was a great success, with developers from all over the world gathering to learn about the latest developments in the Vue.js framework. One of the highlights of the conference was the reveal of Nuxt DevTools, a new tool aimed at improving the developer experience in Nuxt. It was demonstrated by the incredible @antfu who is one of the main contributors in GitHub.

Features

The new Nuxt DevTools offers a set of visual tools available right inside your app.

Overview

Once you open the DevTools you are presented by an overview of your app. Here you can find your version of Nuxt, as well as how many pages, components, imports, modules and plugins your app is using. You can also find some useful links such as the Ideas and Suggestions link to GitHub where you can suggest new things. There is also the project roadmap and a way to report bugs.

For now DevTools appears as a small ribbon on the bottom of your screen. But you can also toggle it to be on the left, right or on the top. Nuxt DevTools is also extensible but more on that later.

Pages

In the pages tab you can see all of the routes you have in your app. You can use the search bar to see if a URL matches accordingly to your routes and press enter to navigate to it. What is more, you can click on the little icon next to the route to open the corresponding Vue file in VS Code.

Components

The Components tab in Nuxt DevTools provides a comprehensive view of all the components present in your app, including those created by the user, registered at runtime, from Nuxt, or from third-party libraries.

The tab allows you to search for components, go to their source files in your editor, view a graph of how components interact with each other.

One last thing, you can also inspect the DOM tree and see which elements are being rendered by which components.

The Components tab helps you to better understand your app and its structure, making it easier to debug and optimize.

Imports

The Imports tab will show a list of all auto-imports registered to Nuxt. You can see in which files they are used. There can be also short descriptions or links to documentation.

Modules

In this tab you can see all the modules that you have installed and information about them.

💡 The team behind Nuxt DevTools has said that it plans for users to be able to have one-click installation of modules right through the app.

App Config

In the App Config tab, you are presented with information from your Public as well as you Private Runtime configurations. Moreover, you can also edit or add variables straight from this tab:

Payload

In the Payload tab, you can monitor the current State and Data. This makes it easy to know exactly what you get from each API request or locally stored Data.

Hooks

The Hooks tab gives you an overview of all hooks and lifecycles in order. This tab can be very useful for testing performance and monitoring at which point is your app behaving slow and where is the bottleneck.

Custom Tabs

As I mentioned earlier there is the possibility for Module authors to extend DevTools with their own custom tabs. In the image above you can see how VueUse have integrated their docs into Nuxt DevTools. There is also the UnoCSS style inspector or the Vitest integration to run tests directly from DevTools. The possibilities are endless.

The current implementation relies on embedding your own-hosted page via an iframe. This is not the best experience, but I believe it is a matter of time the amazing team behind Nuxt DevTools creates a better approach for extensibility.

Installation

In oder to enable Nuxt DevTools we need some prerequisites.

• First of all, we need to have Nuxt version 3.1.0 or higher.
• Make sure to use Node version 16 or higher, as I initially tested with Node 14 and experienced some issues.

In the official GitHub documentation there are two ways to enable DevTools.

1. Using the opt-in per-project command from your project root.

npx nuxi@latest devtools enable

1. Installing it manually as a module.

npm i -D @nuxt/devtools

And let’s not forget to add it to the nuxt.config.ts:

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

I personally recommend using the second approach, as there were some issues for me trying to use the opt-in method.

Once that is done, restart your dev server and you will be able to see the Nuxt DevTools peeping at the bottom of your screen.

That is all, you can now explore the DevTools in your own applications. Below you can find links for the information that inspired this article.

Useful Resources

Nuxt DevTool Github

Development Experience with Nuxt by Anthony Fu

Nuxt Docs

💚  I hope you are excited for the future of Vue and Frontend as I am. In the next article we will be looking at Nuxt Content and how to use it to create our own blog. Make sure to follow me so you don’t miss out. - Alex

Twitter

LinkedIn

YouTube