vite-plugin-vue-devtools

What is vite-plugin-vue-devtools?

vite-plugin-vue-devtools is a plugin for Vite that enhances the development experience for Vue.js applications. It provides a set of tools and features that make debugging and developing Vue components easier and more efficient.

What are vite-plugin-vue-devtools's main functionalities?

Component Inspector

The Component Inspector allows developers to inspect and interact with Vue components directly within the browser's developer tools. This feature helps in understanding the component hierarchy and state.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [vue(), VueDevTools()]
});

State Management Debugging

State Management Debugging provides tools to inspect and manipulate the state of Vuex stores or other state management libraries. This feature is crucial for tracking state changes and debugging state-related issues.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [vue(), VueDevTools()]
});

Performance Monitoring

Performance Monitoring helps developers identify performance bottlenecks in their Vue applications. It provides insights into component rendering times and other performance metrics.

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueDevTools from 'vite-plugin-vue-devtools';

export default defineConfig({
  plugins: [vue(), VueDevTools()]
});

Other packages similar to vite-plugin-vue-devtools

vue-devtools

vue-devtools is a standalone browser extension that provides a similar set of tools for debugging Vue.js applications. It offers component inspection, state management debugging, and performance monitoring. Unlike vite-plugin-vue-devtools, it is not tied to Vite and can be used with any Vue.js project.

vuex

vuex is a state management library for Vue.js. While it does not provide the same development tools as vite-plugin-vue-devtools, it integrates well with vue-devtools for state inspection and debugging. It is focused on managing the state of Vue applications.

README

Vue DevTools ^Preview

English | 简体中文

💡 Ideas & Suggestions | 🗺️ Project Roadmap | 🧑‍💻 Discord Channel

📖 Introduction

vite-plugin-vue-devtools is a Vite plugin designed to enhance the Vue developer experience.

🎉 Features

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.

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

Assets

Assets tab that shows all your static assets and their information. You can open the asset in the browser or download it.

Timeline

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

Routes

Routes tab is a feature integrated with Vue Router, allowing you to view the registered routes and their details.

Pinia

Pinia tab is a feature integrated with Pinia, allowing you to view the registered modules and their details.

Graph

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

Inspect

Inspect expose the 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.

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)

📦 Installation

# vite-plugin-vue-devtools 

pnpm install vite-plugin-vue-devtools -D

🦄 Usage

Configuration Vite

import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'

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

Options

interface AnalyzeOptions {
  /**
   * @default true
  */
  rerenderTrace: boolean
}

interface VitePluginVueDevToolsOptions {
  /**
  * append an import to the module id ending with `appendTo` instead of adding a script into body
  * useful for projects that do not use html file as an entry
  *
  * WARNING: only set this if you know exactly what it does.
  */
  appendTo?: string | RegExp
  /**
   * Enable Vue DevTools to analyze the codebase by using Babel
   * @default
   * {
   *   rerenderTrace: true, // enable rerenderTrace feature
   * }
  */
  analyze?: Partial<AnalyzeOptions>

  /**
  * Customize openInEditor host (e.g. http://localhost:3000)
  * @default false
  */
  openInEditorHost?: string | false
}

💡 Notice

• Only available in development mode.

• Only support Vue3.0+ and Vite 3.1+.

• Only supports single-instance Vue applications.

• Doesn't support SSR (If you're using Nuxt, use 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.

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

📖 Blog Post

• Introducing Vue DevTools (Vite Plugin)

🌸 Credits

• This project is highly inspired by nuxt/devtools. Kudos to Anthony Fu and Nuxt team for the awesome work!

• vuejs/devtools

👨‍💻 Contributors

📄 License

MIT LICENSE