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.

vite-plugin-vue-inspector

? Installation

yarn

yarn add vite-plugin-vue-inspector -D

npm

npm install vite-plugin-vue-inspector -D">

# pnpm 
pnpm install vite-plugin-vue-inspector -D

# yarn
yarn add vite-plugin-vue-inspector -D

# npm
npm install vite-plugin-vue-inspector -D

? Usage

Configuration Vite

// for vue2 import { defineConfig } from "vite" import { createVuePlugin } from "vite-plugin-vue2" import Inspector from "vite-plugin-vue-inspector" export default defineConfig({ plugins: [ createVuePlugin(), Inspector({ vue: 2, }), ], })
// for vue3 import { defineConfig } from "vite" import Vue from "@vitejs/plugin-vue" import Inspector from "vite-plugin-vue-inspector" export default defineConfig({ plugins: [Vue(), Inspector()], })

Example

? Configuration IDE / Editor

It uses an environment variable named 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

    export VUE_EDITOR=code

WebStorm

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

    export VUE_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'

OR

  • install WebStorm command line tools

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

    export VUE_EDITOR=webstorm

Vim

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

export VUE_EDITOR=vim

? Notice

  • It only work in develop mode .
  • It does not currently support SSR and Template Engine (e.g. pug) .

? Thanks

This project is inspired by react-dev-inspector .

?️ Analysis of Theory

[Chinese] 点击页面元素,这个Vite插件帮我打开了Vue组件

? License

MIT LICENSE

GitHub

View Github