\n\n## 📖 Introduction\n\nA vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.\n\n
\n\n
\n\n## 📦 Installation\n\n```bash\n\n# vite-plugin-vue-inspector \n\npnpm install vite-plugin-vue-inspector -D\n\n# unplugin-vue-inspector\n\npnpm install unplugin-vue-inspector -D\n\n```\n\n## 🦄 Usage\n\n### Configuration Vite\n\n```ts\n// for Vue2\n\nimport { defineConfig, } from 'vite'\nimport { createVuePlugin, } from 'vite-plugin-vue2'\nimport Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector\n\nexport default defineConfig({\n plugins: [\n createVuePlugin(),\n Inspector({\n vue: 2\n }),\n ],\n})\n```\n\n```ts\n// for Vue3\n\nimport { defineConfig } from 'vite'\nimport Vue from '@vitejs/plugin-vue'\nimport Inspector from 'unplugin-vue-inspector/vite' // OR vite-plugin-vue-inspector\n\nexport default defineConfig({\n plugins: [Vue(), Inspector()],\n})\n```\n\n```ts\n// for Nuxt3\n// nuxt.config.ts\n\nimport { defineNuxtConfig } from 'nuxt/config'\nimport Inspector from 'vite-plugin-vue-inspector'\n\nexport default defineNuxtConfig({\n modules: [\n ['unplugin-vue-inspector/nuxt', {\n enabled: true,\n toggleButtonVisibility: 'always',\n }],\n ],\n})\n```\n\n### Options\n\n```ts\ninterface VitePluginInspectorOptions {\n /**\n * Vue version\n * @default 3\n */\n vue?: 2 | 3\n\n /**\n * Default enable state\n * @default false\n */\n enabled?: boolean\n\n /**\n * Define a combo key to toggle inspector\n * @default 'control-shift' on windows, 'meta-shift' on other os\n *\n * any number of modifiers `control` `shift` `alt` `meta` followed by zero or one regular key, separated by -\n * examples: control-shift, control-o, control-alt-s meta-x control-meta\n * Some keys have native behavior (e.g. alt-s opens history menu on firefox).\n * To avoid conflicts or accidentally typing into inputs, modifier only combinations are recommended.\n */\n toggleComboKey?: string\n\n /**\n * Toggle button visibility\n * @default 'active'\n */\n toggleButtonVisibility?: 'always' | 'active' | 'never'\n\n /**\n * Toggle button display position\n * @default top-right\n */\n toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'\n\n /**\n * append an import to the module id ending with `appendTo` instead of adding a script into body\n * useful for frameworks that do not support trannsformIndexHtml hook (e.g. Nuxt3)\n *\n * WARNING: only set this if you know exactly what it does.\n */\n appendTo?: string | RegExp\n}\n```\n\n### Example\n\n- [Vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue2)\n- [Vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/vue3)\n- [Nuxt3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/packages/playground/nuxt)\n\n## 🔌 Configuration IDE / Editor\n\nIt uses an **environment variable** named **`VUE_EDITOR`** to specify an IDE application, but if you do not set this variable, it will try to open a common IDE that you have open or installed once it is certified.\n\nFor example, if you want it always open VSCode when inspection clicked, set `export VUE_EDITOR=code` in your shell.\n\n\n### VSCode\n\n- install VSCode command line tools, [see the official docs](https://code.visualstudio.com/docs/setup/mac#_launching-from-the-command-line)\n \n\n- set env to shell, like `.bashrc` or `.zshrc` \n\n ```bash\n export VUE_EDITOR=code\n ```\n\n \n\n### WebStorm \n\n- just set env with an absolute path to shell, like `.bashrc` or `.zshrc` (only MacOS) \n\n ```bash\n export VUE_EDITOR='/Applications/WebStorm.app/Contents/MacOS/webstorm'\n ```\n\n**OR**\n\n- install WebStorm command line tools\n\n- then set env to shell, like `.bashrc` or `.zshrc` \n\n ```bash\n export VUE_EDITOR=webstorm\n ```\n\n \n\n### Vim\n\nYes! you can also use vim if you want, just set env to shell\n\n```bash\nexport VUE_EDITOR=vim\n```\n\n \n\n## 💡 Notice\n\n- **[BREAKING CHANGE] From v1.0, `enabled` option default value changed from `true` to `false` .**\n- It only work in develop mode .\n- It does not currently support `Template Engine (e.g. pug)` .\n\n## 👨💻 Programmatic Usage\n\nYou can also use control inspector programmatically, by accessing the `__VUE_INSPECTOR__` global variable.\n\n```ts\nimport type { VueInspectorClient } from 'vite-plugin-vue-inspector'\n\nconst inspector: VueInspectorClient = window.__VUE_INSPECTOR__\n\nif (inspector) {\n // enable inspector\n inspector.enable()\n // or\n inspector.disable()\n}\n```\n\n## 🌸 Credits\n\nThis project is inspired by [react-dev-inspector](https://github.com/zthxxx/react-dev-inspector) .\n\nPartially implementation is inspired by [vite-plugin-svelte-inspector](https://github.com/sveltejs/vite-plugin-svelte/tree/main/packages/vite-plugin-svelte/src/ui/inspector) .\n\n## 🤖️ Analysis of Theory\n\n[Chinese] [点击页面元素,这个Vite插件帮我打开了Vue组件](https://juejin.cn/post/7077347158545924127)\n## 📄 License\n\n[MIT LICENSE](./LICENSE)\n","readmeFilename":"README.md","repository":{"type":"git","url":"git+https://github.com/webfansplz/vite-plugin-vue-inspector.git"},"license":"MIT","homepage":"https://github.com/webfansplz/vite-plugin-vue-inspector#readme","keywords":["vue","vite","vscode","vite-plugin","inspector","debug"],"author":{"name":"webfansplz"},"bugs":{"url":"https://github.com/webfansplz/vite-plugin-vue-inspector/issues"}}
![\"vite-plugin-vue-inspector\"](\"./logo.svg\"){kind=logo}
\n![\"\"](\"https://developer.stackblitz.com/img/open_in_stackblitz.svg\")
\n![\"vite-plugin-vue-inspector\"](\"./public/preview.gif\")
\n