Enhancing Vue Development with vite-plugin-vue-inspector-plus

vite-plugin-vue-inspector-plus is a Vite plugin designed to enhance the Vue development experience. This plugin seamlessly integrates with Vue Devtools or Vue Inspector, making component inspection more efficient than ever.

You can click on an element with a shortcut key to open a popover that displays its component hierarchy. By clicking on any item in the hierarchy, you can quickly access the corresponding source code file for that component.

Installation

npm install vite-plugin-vue-inspector-plus --save-dev

Usage

This plugin needs to be used with Vue Devtools or Vue Inspector.

// vite.config.js

import { defineConfig } from 'vite';
import VueDevTools from 'vite-plugin-vue-devtools';
import VueInspectorPlus from 'vite-plugin-vue-inspector-plus';

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

Options

• modifierKey: string - The modifier key to show the inspector dropdown. Default: 'ctrl|meta'.

License

This project is licensed under the MIT License

---

For more information and updates, visit the GitHub repository.