vite-plugin-vue-inspector

5.4.0 verified Mon Apr 27 auth: no javascript

A Vite plugin that enables clicking UI elements in the browser to open the corresponding source code in your IDE. Current stable version: 5.4.0. Active development, frequent releases. Supports Vue 2, Vue 3, and Nuxt 3. Key differentiator: automatic IDE file opening from browser clicks, with toggle overlay and configurable combo keys.

Common errors

error Error: The inspector seems to be disabled. Press Meta-Shift to toggle. ↓

cause Inspector is not enabled by default; toggle combo not pressed.

fix

Set enabled: true in options or press the toggle combo key (default: Control-Shift or Meta-Shift).

error TypeError: Cannot read properties of undefined (reading 'vue') ↓

cause Missing Vue plugin or incorrect order; Inspector requires Vue plugin to be registered before it.

fix

Ensure @vitejs/plugin-vue (or vite-plugin-vue2) is added to plugins before Inspector().

error Module '"vite-plugin-vue-inspector"' has no exported member 'Inspector'. ↓

cause Trying named import instead of default import.

fix

Use import Inspector from 'vite-plugin-vue-inspector' instead of import { Inspector } from ...

error [vite] Internal server error: Cannot find module 'vite-plugin-vue-inspector' ↓

cause Package not installed or missing devDependency.

fix

Run npm install -D vite-plugin-vue-inspector or the corresponding package manager command.

Warnings

breaking v5.0.0: The `openInEditorHost` option has been removed; the plugin now auto-detects host. ↓

fix Remove the `openInEditorHost` option from your config.

breaking v4.0.0: data-v-inspector attributes are now hidden in production HTML by default. ↓

fix If you need them visible in production, adjust the plugin options (not exposed explicitly).

deprecated The `openInEditorHost` option is deprecated since v5.0.0 and removed. ↓

fix Simply remove the option; the plugin works without it.

gotcha The plugin is shipped as ESM. CJS require() may fail if Vite is not in CJS mode. ↓

fix Use import syntax or ensure your project is configured for ESM.

gotcha Toggle combo key may conflict with browser shortcuts (e.g., alt-s opens history menu). ↓

fix Use modifier-only combos like 'control-shift' or 'meta-shift' to avoid conflicts.

Install

npm install vite-plugin-vue-inspector

yarn add vite-plugin-vue-inspector

pnpm add vite-plugin-vue-inspector

Imports

Inspector

wrong

const Inspector = require('vite-plugin-vue-inspector')

correct

import Inspector from 'vite-plugin-vue-inspector'

Default import in ESM. CJS require works but not recommended. Use default import.

Inspector as vitePluginInspector
wrong
```
import { Inspector } from 'vite-plugin-vue-inspector'
```
correct
```
import Inspector from 'unplugin-vue-inspector/vite'
```
Also available via unplugin-vue-inspector/vite. Named export does not exist.
Inspector (nuxt)
wrong
```
import Inspector from 'vite-plugin-vue-inspector/nuxt'
```
correct
```
import Inspector from 'vite-plugin-vue-inspector'
```
For Nuxt, import the default from vite-plugin-vue-inspector, but use module registration: modules: [['unplugin-vue-inspector/nuxt', { ... }]]

Quickstart

Sets up the inspector plugin for Vue 3 with default toggle key and always visible button.

// vite.config.ts
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Inspector from 'vite-plugin-vue-inspector'

export default defineConfig({
  plugins: [
    Vue(),
    Inspector({
      enabled: true,
      toggleButtonVisibility: 'always',
      toggleComboKey: 'control-shift',
    }),
  ],
})