{"id":12375,"library":"vite-plugin-vue-devtools","title":"Vite Plugin Vue DevTools","description":"vite-plugin-vue-devtools is an official Vite plugin designed to integrate Vue DevTools directly into a development server, significantly enhancing the developer experience for Vue.js applications. It provides real-time inspection of component hierarchies, state management, routing, and performance metrics, all accessible within the browser's developer tools. The current stable version is 8.1.1, and the project exhibits an active release cadence with frequent updates for bug fixes and feature enhancements, indicating strong ongoing support from the Vue.js core team. Its key differentiator lies in its seamless, officially supported integration within the Vue ecosystem, offering a robust and consistent debugging environment for projects powered by Vite.","status":"active","version":"8.1.1","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/devtools","tags":["javascript","vue-devtools","vite-plugin","vite-plugin-vue-devtools","dx","typescript"],"install":[{"cmd":"npm install vite-plugin-vue-devtools","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-vue-devtools","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-vue-devtools","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vite-based projects. Required for the plugin to function.","package":"vite","optional":false}],"imports":[{"note":"The plugin is exported as a default function; it should not be destructured.","wrong":"import { VueDevTools } from 'vite-plugin-vue-devtools'","symbol":"VueDevTools","correct":"import VueDevTools from 'vite-plugin-vue-devtools'"},{"note":"Vite configuration files are typically ESM-first; use ES module imports.","wrong":"const defineConfig = require('vite')","symbol":"defineConfig","correct":"import { defineConfig } from 'vite'"},{"note":"The `VueDevTools` function can accept an options object to customize its behavior, such as disabling the component inspector. Refer to the official documentation for available options.","symbol":"VueDevTools options","correct":"import VueDevTools from 'vite-plugin-vue-devtools';\nexport default defineConfig({\n  plugins: [\n    VueDevTools({\n      componentInspector: false // Example option\n    }),\n  ],\n})"}],"quickstart":{"code":"import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport VueDevTools from 'vite-plugin-vue-devtools'\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    VueDevTools(),\n  ],\n  // Ensure your Vite project is configured for Vue 3\n  // For example, if using TypeScript, ensure 'vue' is correctly resolved\n  // Example of an environment variable usage (if applicable for other plugins):\n  // server: {\n  //   port: parseInt(process.env.PORT ?? '5173')\n  // }\n})","lang":"typescript","description":"This quickstart demonstrates how to integrate `vite-plugin-vue-devtools` into a Vite configuration for a Vue 3 project, enabling the DevTools overlay in development mode. It also includes the standard `@vitejs/plugin-vue` plugin for completeness."},"warnings":[{"fix":"For Vue 2 projects, install `vite-plugin-vue-devtools` v6 or directly use the browser extension for Vue DevTools v6. Ensure your `package.json` specifies compatible versions.","message":"Vue DevTools v7+ (and thus `vite-plugin-vue-devtools` v7+) exclusively supports Vue 3 applications. Projects using Vue 2 must use older versions of Vue DevTools (v6).","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Ensure you are using `vite-plugin-vue-devtools` version 8.0.4 or higher if you are developing with Node.js v25 or newer to avoid compatibility issues.","message":"Multiple `vite-plugin-vue-devtools` versions (v7.7.8, v7.7.9, v8.0.3, v8.0.4) addressed compatibility issues with Node.js v25+. Older versions might encounter problems when running on newer Node.js environments.","severity":"gotcha","affected_versions":"<8.0.4"},{"fix":"Upgrade to `vite-plugin-vue-devtools` version 8.0.2 or newer immediately to mitigate the security vulnerability associated with the `ip` package.","message":"Version 8.0.2 included a security fix that removed a vulnerable, unmaintained `ip` package dependency. Users on older versions might be exposed to potential security vulnerabilities.","severity":"breaking","affected_versions":"<8.0.2"},{"fix":"If using `vite-plugin-html` or similar, ensure `vite-plugin-vue-devtools` is registered *before* `vite-plugin-html` in your `vite.config.ts` plugins array.","message":"When combining `vite-plugin-vue-devtools` with other Vite plugins that modify HTML, such as `vite-plugin-html`, the order of plugins can matter. Incorrect ordering may prevent DevTools from rendering as expected.","severity":"gotcha","affected_versions":">=7.0.0"},{"fix":"Ensure your project's `vite` dependency satisfies the peer dependency range specified by `vite-plugin-vue-devtools`. Update or downgrade Vite if necessary.","message":"The plugin has a peer dependency on `vite` (currently `^6.0.0 || ^7.0.0 || ^8.0.0`). Incompatible Vite versions will lead to installation or runtime errors.","severity":"breaking","affected_versions":"All versions"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Call the plugin function in your `vite.config.ts`:\n```typescript\nplugins: [\n  VueDevTools(), // Corrected: call the function\n  vue(),\n],\n```","cause":"The `VueDevTools` function was imported but not called as a function (e.g., `VueDevTools` instead of `VueDevTools()`) in the `plugins` array.","error":"Error: [vite-plugin-vue-devtools] The plugin function must return a plugin object."},{"fix":"Ensure the package is installed as a dev dependency: `npm install -D vite-plugin-vue-devtools` or `yarn add -D vite-plugin-vue-devtools`. Verify the import statement `import VueDevTools from 'vite-plugin-vue-devtools'` is correct in your `vite.config.ts`.","cause":"The package was not installed, or the import path is incorrect, or an ESM-only package is being imported in a CommonJS context.","error":"Error: Cannot find module 'vite-plugin-vue-devtools'"},{"fix":"If you are using `vite-plugin-html`, ensure `vite-plugin-vue-devtools` is registered before `vite-plugin-html` in your `vite.config.ts`. Also, check the official troubleshooting guide.","cause":"Often related to conflicts with other Vite plugins, particularly those that manipulate HTML, or incorrect plugin order.","error":"Vue DevTools (vite plugin) doesn't render as expected"},{"fix":"This is a known issue (e.g., Cloudflare Workers issue #11063). A temporary workaround might be to disable `vite-plugin-vue-devtools` during development with such configurations, or monitor the respective GitHub issues for updates and patches.","cause":"There can be compatibility issues with `vite-plugin-vue-devtools` when specific build configurations, like remote bindings for databases (e.g., Cloudflare D1), are enabled, potentially due to how the plugin interacts with the HMR system.","error":"Plugin fails when remote bindings are enabled (e.g., Cloudflare Workers D1)"}],"ecosystem":"npm"}