Introducing Vue DevTools (Vite Plugin)
Published: 2023-06-28 13:31:50

![](https://files.mdnice.com/user/6865/e2eeec9a-f0e0-4d44-bdce-0d6115a3b8c3.png)


## Introduction

In recent years, there has been an increasing focus on improving the developer experience (DX). Tools and frameworks have been striving to enhance it. I believe everyone already knows `Vite`, a tool that has gained significant popularity in the frontend build tooling in recent years. It's fast, but that's not its only advantage.Vite's ecosystem has seen rapid growth due to its user-friendly and highly extensible plugin design mechanism.This allows developers to quickly integrate Vite into their tools and frameworks. Anthony Fu opensourced the [Nuxt DevTools](https://github.com/nuxt/devtools) on Vue Amsterdam 2023,a new tool to help you understand your Nuxt app and improve the developer experience even further. It deeply moved and inspired me, why can't Vue have a similarly cool tool? We all know that there is an official Vue Devtools browser extension, but can we create a Vue Devtools that is bound to Vite and integrates with the existing Vite ecosystem to enhance its capabilities while retaining the original features of Vue Devtools?Additionally, by exposing configurations and capabilities, users can customize and extend functionalities for greater flexibility. Building upon these ideas, [vite-plugin-vue-devtools](https://github.com/webfansplz/vite-plugin-vue-devtools) is out, Let's take a look at what it has to offer!

## Introducing Vue DevTools

### Pages

The pages tab shows your current routes and provide a quick way to navigate to them. For dynamic routes, it also provide a form to fill with each params interactively. You can also use the textbox to play and test how each route is matched.


![](https://files.mdnice.com/user/6865/dde2f55c-72eb-4a6e-a546-01eef0384f4e.png)



### Components

Components tab show all the components you are using in your app and hierarchy. You can also select them to see the details of the component (e.g. data,props).


![](https://files.mdnice.com/user/6865/f041acf1-2622-4566-996b-0a81cdb5e7be.png)


### Assets

Assets tab that shows all your static assets (vite config.publicDir only now) and their information. You can open the asset in the browser or download it.


![](https://files.mdnice.com/user/6865/964bc017-1d19-4c13-82e0-3091c9682c05.png)


### Timeline

Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.


![](https://files.mdnice.com/user/6865/df0555f7-79bf-4b4a-948c-bff0f45586d6.png)


### Routes

Routes tab is a feature integrated with [Vue Router](https://github.com/vuejs/router), allowing you to view the registered routes and their details.


![](https://files.mdnice.com/user/6865/4fa0a1c6-6653-42d9-8ddc-8091761193f1.png)


### Pinia

Pinia tab is a feature integrated with [Pinia](https://github.com/vuejs/pinia), allowing you to view the registered modules and their details.


![](https://files.mdnice.com/user/6865/ec409c5c-ebe1-4fc3-b317-0679288a9d26.png)


### Graph

Graph tab provides a graph view that show the relationship between components. 


![](https://files.mdnice.com/user/6865/1f45e23a-2d59-4f5c-9bf6-8b2d455a9a38.png)


### Inspect

Inspect expose the [vite-plugin-inspect](https://github.com/antfu/vite-plugin-inspect) integration, allowing you to inspect transformation steps of Vite. It can be helpful to understand how each plugin is transforming your code and spot potential issues.


![](https://files.mdnice.com/user/6865/cbfb271a-a5fd-495e-8ffc-b255c93bfb93.png)


### Inspector

You can also use the "Inspector" feature to inspect the DOM tree and see which component is rendering it. Click to go to your editor of the specific line. Making it much easier to make changes, without the requirement of understanding the project structure thoroughly. (This feature is implemented based on the [vite-plugin-vue-inspector](https://github.com/webfansplz/vite-plugin-vue-inspector))


![](https://files.mdnice.com/user/6865/daba8cda-70f1-4db1-b0a0-0b6317f45d1f.png)

## Vue DevTools Usage

### Installation

```bash

# vite-plugin-vue-devtools 

npm install vite-plugin-vue-devtools -D

```

### Usage

```ts
import { defineConfig } from 'vite'
import VueDevtools from 'vite-plugin-vue-devtools'

export default defineConfig({
  plugins: [
    VueDevtools(),
    vue(),
  ],
})
```

### Notice

- Only available in development mode.
- Only support Vue3.0+.
- Currently only supports single-instance Vue applications (multi-instance support is coming soon).
- Doesn't support SSR (If you're using Nuxt, use [nuxt/devtools](https://github.com/nuxt/devtools) directly).
- The plugin follows Vue's devtools configuration, so if you have configured the `hide` option, it will also be applied in this plugin. e.g.

  ```js
  // This Vue instance will be ignored by the plugin.
  createApp({
    render: () => h(App),
    devtools: {
      hide: true,
    },
  })
  ```

## Credits

- This project is highly inspired by [nuxt/devtools](https://github.com/nuxt/devtools). Kudos to Anthony Fu and Nuxt team for the awesome work!
- [vuejs/devtools](https://github.com/vuejs/devtools)

## Conclusion

The plugin is currently in the Early Preview, and any ideas or bug feedback are welcome. If it has been helpful to you, please give it a [star](https://github.com/webfansplz/vite-plugin-vue-devtools), thanks!