English | ็ฎไฝไธญๆ
๐ก Ideas & Suggestions | ๐บ๏ธ Project Roadmap | ๐งโ๐ป Discord Channel
vite-plugin-vue-devtools
is a Vite
plugin designed to enhance the Vue
developer experience.
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 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 tab that shows all your static assets and their information. You can open the asset in the browser or download it.
Timeline tab has three categories: Performance, Router Navigations, and Pinia. You can switch between them to see the state changes and timelines.
Routes tab is a feature integrated with Vue Router, allowing you to view the registered routes and their details.
Pinia tab is a feature integrated with Pinia, allowing you to view the registered modules and their details.
Graph tab provides a graph view that show the relationship between components.
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.
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)
# vite-plugin-vue-devtools
pnpm install vite-plugin-vue-devtools -D
import { defineConfig } from 'vite'
import VueDevTools from 'vite-plugin-vue-devtools'
export default defineConfig({
plugins: [
VueDevTools(),
vue(),
],
})
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
}
-
Only available in
development mode
. -
Only support
Vue3.0+
. -
Only supports single-instance
Vue
applications. -
Doesn't support
SSR
(If you're usingNuxt
, use nuxt/devtools directly). -
The plugin follows
Vue's DevTools
configuration, so if you have configured thehide
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, }, })
-
This project is highly inspired by nuxt/devtools. Kudos to Anthony Fu and
Nuxt
team for the awesome work!