What is vite-plugin-vue-inspector?
vite-plugin-vue-inspector is a Vite plugin that provides an inspector for Vue components. It allows developers to inspect and debug Vue components directly within the browser, making the development process more efficient and streamlined.
What are vite-plugin-vue-inspector's main functionalities?
Component Inspection
This feature allows developers to inspect Vue components directly in the browser. By integrating the plugin into the Vite configuration, developers can click on components in the browser to see their details, such as props, data, and events.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueInspector from 'vite-plugin-vue-inspector';
export default defineConfig({
plugins: [vue(), VueInspector()]
});
Hot Module Replacement (HMR)
This feature enables Hot Module Replacement (HMR) for Vue components. When changes are made to a component, the inspector updates in real-time without requiring a full page reload, making the development process faster and more efficient.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueInspector from 'vite-plugin-vue-inspector';
export default defineConfig({
plugins: [vue(), VueInspector({
hot: true
})]
});
Customizable Shortcuts
This feature allows developers to customize the keyboard shortcuts used to toggle the inspector and close it. This can be particularly useful for developers who have specific preferences or need to avoid conflicts with other tools.
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import VueInspector from 'vite-plugin-vue-inspector';
export default defineConfig({
plugins: [vue(), VueInspector({
shortcuts: {
toggle: 'ctrl-shift-i',
close: 'esc'
}
})]
});
Other packages similar to vite-plugin-vue-inspector
vue-devtools
Vue Devtools is a browser extension that provides a set of tools for debugging and inspecting Vue.js applications. It offers a similar component inspection feature but is more comprehensive, including state management, routing, and performance monitoring. Unlike vite-plugin-vue-inspector, Vue Devtools is not specific to Vite and can be used with any Vue.js project.
vite-plugin-inspect
vite-plugin-inspect is a Vite plugin that provides an inspector for Vite projects. It allows developers to inspect the module graph, view the transformation pipeline, and debug Vite-specific issues. While it is not specific to Vue components, it offers a broader range of inspection tools for Vite projects in general.
📖 Introduction
A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
📦 Installation
pnpm install vite-plugin-vue-inspector -D
pnpm install unplugin-vue-inspector -D
🦄 Usage
Configuration Vite
import { defineConfig, } from 'vite'
import { createVuePlugin, } from 'vite-plugin-vue2'
import Inspector from 'unplugin-vue-inspector/vite'
export default defineConfig({
plugins: [
createVuePlugin(),
Inspector({
vue: 2
}),
],
})
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Inspector from 'unplugin-vue-inspector/vite'
export default defineConfig({
plugins: [Vue(), Inspector()],
})
import { defineNuxtConfig } from 'nuxt/config'
import Inspector from 'vite-plugin-vue-inspector'
export default defineNuxtConfig({
modules: [
['unplugin-vue-inspector/nuxt', {
enabled: true,
toggleButtonVisibility: 'always',
}],
],
})
Options
interface VitePluginInspectorOptions {
vue?: 2 | 3
enabled?: boolean
toggleComboKey?: string | false
toggleButtonVisibility?: 'always' | 'active' | 'never'
toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
appendTo?: string | RegExp
openInEditorHost?: string | false
lazyLoad?: number | false
disableInspectorOnEditorOpen?: boolean
cleanHtml?: boolean
launchEditor?: 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'cursor'
}
Example
Supported editors
🔌 Configuration IDE / Editor
Starting from v5.1.0, We recommend using the launchEditor
option configuration to specify the IDE (Please ensure that the editor's environment variables are correctly configured beforehand.)
It uses an environment variable named LAUNCH_EDITOR
to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.
For example, if you want it always open VS Code when inspection clicked, set export LAUNCH_EDITOR=code
in your shell.
VS Code
-
install VS Code command line tools, see the official docs
-
set env to shell, like .bashrc
or .zshrc
export LAUNCH_EDITOR=code
VS Code with WSL (Windows)
{
"terminal.integrated.env.linux": {
"EDITOR": "code"
}
}
WebStorm
-
just set env with an absolute path to shell, like .bashrc
or .zshrc
(only MacOS)
export LAUNCH_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
OR
-
install WebStorm command line tools
-
then set env to shell, like .bashrc
or .zshrc
export LAUNCH_EDITOR=webstorm
PhpStorm
-
just set env with an absolute path to shell, like .bashrc
or .zshrc
(only MacOS)
export LAUNCH_EDITOR='/Applications/PhpStorm.app/Contents/MacOS/phpstorm'
OR
-
install PhpStorm command line tools
-
then set env to shell, like .bashrc
or .zshrc
export LAUNCH_EDITOR=phpstorm
Vim
Yes! you can also use vim if you want, just set env to shell
export LAUNCH_EDITOR=vim
💡 Notice
- [BREAKING CHANGE] From v1.0,
enabled
option default value changed from true
to false
. - It only work in develop mode .
- It does not currently support
Template Engine (e.g. pug)
.
👨💻 Programmatic Usage
You can also use control inspector programmatically, by accessing the __VUE_INSPECTOR__
global variable.
import type { VueInspectorClient } from 'vite-plugin-vue-inspector'
const inspector: VueInspectorClient = window.__VUE_INSPECTOR__
if (inspector) {
inspector.enable()
inspector.disable()
}
🌸 Credits
This project is inspired by react-dev-inspector .
Partially implementation is inspired by vite-plugin-svelte-inspector .
🤖️ Analysis of Theory
[Chinese] 点击页面元素,这个Vite插件帮我打开了Vue组件
📄 License
MIT LICENSE