{"id":22920,"library":"vite-plugin-vue-inspector","title":"vite-plugin-vue-inspector","description":"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.","status":"active","version":"5.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/webfansplz/vite-plugin-vue-inspector","tags":["javascript","vue","vite","vscode","vite-plugin","inspector","debug","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-inspector","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-inspector","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-inspector","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer 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)","package":"vite","optional":false}],"imports":[{"note":"Default import in ESM. CJS require works but not recommended. Use default import.","wrong":"const Inspector = require('vite-plugin-vue-inspector')","symbol":"Inspector","correct":"import Inspector from 'vite-plugin-vue-inspector'"},{"note":"Also available via unplugin-vue-inspector/vite. Named export does not exist.","wrong":"import { Inspector } from 'vite-plugin-vue-inspector'","symbol":"Inspector as vitePluginInspector","correct":"import Inspector from 'unplugin-vue-inspector/vite'"},{"note":"For Nuxt, import the default from vite-plugin-vue-inspector, but use module registration: modules: [['unplugin-vue-inspector/nuxt', { ... }]]","wrong":"import Inspector from 'vite-plugin-vue-inspector/nuxt'","symbol":"Inspector (nuxt)","correct":"import Inspector from 'vite-plugin-vue-inspector'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport Inspector from 'vite-plugin-vue-inspector'\n\nexport default defineConfig({\n  plugins: [\n    Vue(),\n    Inspector({\n      enabled: true,\n      toggleButtonVisibility: 'always',\n      toggleComboKey: 'control-shift',\n    }),\n  ],\n})","lang":"typescript","description":"Sets up the inspector plugin for Vue 3 with default toggle key and always visible button."},"warnings":[{"fix":"Remove the `openInEditorHost` option from your config.","message":"v5.0.0: The `openInEditorHost` option has been removed; the plugin now auto-detects host.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"If you need them visible in production, adjust the plugin options (not exposed explicitly).","message":"v4.0.0: data-v-inspector attributes are now hidden in production HTML by default.","severity":"breaking","affected_versions":">=4.0.0"},{"fix":"Simply remove the option; the plugin works without it.","message":"The `openInEditorHost` option is deprecated since v5.0.0 and removed.","severity":"deprecated","affected_versions":">=5.0.0"},{"fix":"Use import syntax or ensure your project is configured for ESM.","message":"The plugin is shipped as ESM. CJS require() may fail if Vite is not in CJS mode.","severity":"gotcha","affected_versions":"*"},{"fix":"Use modifier-only combos like 'control-shift' or 'meta-shift' to avoid conflicts.","message":"Toggle combo key may conflict with browser shortcuts (e.g., alt-s opens history menu).","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Set `enabled: true` in options or press the toggle combo key (default: Control-Shift or Meta-Shift).","cause":"Inspector is not enabled by default; toggle combo not pressed.","error":"Error: The inspector seems to be disabled. Press Meta-Shift to toggle."},{"fix":"Ensure @vitejs/plugin-vue (or vite-plugin-vue2) is added to plugins before Inspector().","cause":"Missing Vue plugin or incorrect order; Inspector requires Vue plugin to be registered before it.","error":"TypeError: Cannot read properties of undefined (reading 'vue')"},{"fix":"Use `import Inspector from 'vite-plugin-vue-inspector'` instead of `import { Inspector } from ...`","cause":"Trying named import instead of default import.","error":"Module '\"vite-plugin-vue-inspector\"' has no exported member 'Inspector'."},{"fix":"Run `npm install -D vite-plugin-vue-inspector` or the corresponding package manager command.","cause":"Package not installed or missing devDependency.","error":"[vite] Internal server error: Cannot find module 'vite-plugin-vue-inspector'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}