{"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,"search_vec":"'2':36 '3':38,41 '5.4.0':29 'activ':30 'automat':44 'browser':16,49 'click':11,50 'code':22 'combo':56 'configur':55 'correspond':20 'current':26 'debug':66 'develop':31 'differenti':43 'element':13 'enabl':10 'file':46 'frequent':32 'ide':25,45 'inspector':5,65 'javascript':58 'key':42,57 'nuxt':40 'open':18,47 'overlay':53 'plugin':3,8,64 'releas':33 'sourc':21 'stabl':27 'support':34 'toggl':52 'typescript':67 'ui':12 'version':28 'vite':2,7,60,63 'vite-plugin':62 'vite-plugin-vue-inspector':1 'vscode':61 'vue':4,35,37,59","created_at":"2026-04-27T17:07:47.634562+00:00","updated_at":"2026-04-27T17:07:47.634562+00:00","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,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/webfansplz/vite-plugin-vue-inspector","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vite-plugin-vue-inspector","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-18","next_check":"2026-07-26","install_tag":null}}