Registry / web-framework / vite-plugin-vue-inspector

vite-plugin-vue-inspector

library5.4.0jsnpmunverified

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.

web-framework

npm install vite-plugin-vue-inspector

github ↗package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-IN

vite-plugin-vue-inspector

web-frameworkjavascriptv5.4.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Inspector

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

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

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

Inspector as vitePluginInspector

✓ import Inspector from 'unplugin-vue-inspector/vite'

✗ import { Inspector } from 'vite-plugin-vue-inspector'

Also available via unplugin-vue-inspector/vite. Named export does not exist.

Inspector (nuxt)

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

✗ import Inspector from 'vite-plugin-vue-inspector/nuxt'

For Nuxt, import the default from vite-plugin-vue-inspector, but use module registration: modules: [['unplugin-vue-inspector/nuxt', { ... }]]

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', }), ], })

Debug

Known issues

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

fix

Remove the `openInEditorHost` option from your config.

affects: >=5.0.0

breakingv4.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).

affects: >=4.0.0

deprecatedThe `openInEditorHost` option is deprecated since v5.0.0 and removed.

fix

Simply remove the option; the plugin works without it.

affects: >=5.0.0

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

affects: *

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

affects: *

Errors

Common errors & fixes

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

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

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

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().

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

Trying named import instead of default import.

fix

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

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

Package not installed or missing devDependency.

fix

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

Upgrade

Version history

5.4.0latest on npm

Audit

Dependencies

viterequiredPeer dependency required for the Vite plugin system (^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0)

Agent activity

10 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/webfansplz/vite-plugin-vue-inspector ↗

packagehttps://www.npmjs.com/package/vite-plugin-vue-inspector ↗