Vite 中文文档
vite-plugin-vue-inspector

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

vite-plugin-vue-inspector

📦 Installation


  1. ``` shell
  2. # vite-plugin-vue-inspector

  4. pnpm install vite-plugin-vue-inspector -D

  6. # unplugin-vue-inspector

  8. pnpm install unplugin-vue-inspector -D

  10. ```

🦄 Usage


Configuration Vite


  1. ``` ts
  2. // for Vue2

  4. import { defineConfig, } from 'vite'
  5. import { createVuePlugin, } from 'vite-plugin-vue2'
  6. import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

  8. export default defineConfig({
  9.   plugins: [
  10.     createVuePlugin(),
  11.     Inspector({
  12.       vue: 2
  13.     }),
  14.   ],
  15. })
  16. ```

  1. ``` ts
  2. // for Vue3

  4. import { defineConfig } from 'vite'
  5. import Vue from '@vitejs/plugin-vue'
  6. import Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector

  8. export default defineConfig({
  9.   plugins: [Vue(), Inspector()],
  10. })
  11. ```

  1. ``` ts
  2. // for Nuxt3
  3. // nuxt.config.ts
  4. import { defineNuxtConfig } from 'nuxt/config'
  5. import Inspector from 'vite-plugin-vue-inspector'

  7. export default defineNuxtConfig({
  8.   modules: [
  9.     ['unplugin-vue-inspector/nuxt', {
  10.       enabled: true,
  11.       toggleButtonVisibility: 'always',
  12.     }],
  13.   ],
  14. })
  15. ```

Options


  1. ``` ts
  2. interface VitePluginInspectorOptions {
  3.   /**
  4.   * Vue version
  5.   * @default 3
  6.   */
  7.   vue?: 2 | 3

  9.   /**
  10.   * Default enable state
  11.   * @default false
  12.   */
  13.   enabled?: boolean

  15.   /**
  16.   * Define a combo key to toggle inspector
  17.   * @default 'control-shift' on windows, 'meta-shift' on other os
  18.   *
  19.   * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -
  20.   * examples: control-shift, control-o, control-alt-s  meta-x control-meta
  21.   * Some keys have native behavior (e.g. alt-s opens history menu on firefox).
  22.   * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.
  23.   * You can also disable it by setting `false`.
  24.   */
  25.   toggleComboKey?: string | false

  27.   /**
  28.   * Toggle button visibility
  29.   * @default 'active'
  30.   */
  31.   toggleButtonVisibility?: 'always' | 'active' | 'never'

  33.   /**
  34.   * Toggle button display position
  35.   * @default top-right
  36.   */
  37.   toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'

  39.   /**
  40.   * append an import to the module id ending with `appendTo` instead of adding a script into body
  41.   * useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)
  42.   *
  43.   * WARNING: only set this if you know exactly what it does.
  44.   */
  45.   appendTo?: string | RegExp
  46. }
  47. ```

Example


Vue2
Vue3
Nuxt3

🔌  Configuration IDE / Editor


It uses an environment variablenamed VUE_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 VSCode when inspection clicked, set export VUE_EDITOR=code in your shell.

VSCode


install VSCode command line tools, see the official docs install-vscode-cli

set env to shell, like .bashrc or .zshrc

  1. ``` shell
  2. export VUE_EDITOR=code
  3. ```

WebStorm


just set env with an absolute path to shell, like .bashrc or .zshrc (only MacOS)

  1. ``` shell
  2. export VUE_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'
  3. ```

OR

install WebStorm command line tools

then set env to shell, like .bashrc or .zshrc

  1. ``` shell
  2. export VUE_EDITOR=webstorm
  3. ```

Vim


Yes! you can also use vim if you want, just set env to shell

  1. ``` shell
  2. export VUE_EDITOR=vim
  3. ```

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

  1. ``` ts
  2. import type { VueInspectorClient } from 'vite-plugin-vue-inspector'

  4. const inspector: VueInspectorClient = window.__VUE_INSPECTOR__

  6. if (inspector) {
  7.   // enable inspector
  8.   inspector.enable()
  9.   // or
  10.   inspector.disable()
  11. }
  12. ```

🌸 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