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

vite-plugin-vue-devtools

library8.1.1jsnpmunverified

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.

web-framework observability

npm install vite-plugin-vue-devtools

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-VUE-DE

vite-plugin-vue-devtools

web-frameworkjavascriptv8.1.1

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–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

VueDevTools

✓ import VueDevTools from 'vite-plugin-vue-devtools'

✗ import { VueDevTools } from 'vite-plugin-vue-devtools'

The plugin is exported as a default function; it should not be destructured.

defineConfig

✓ import { defineConfig } from 'vite'

✗ const defineConfig = require('vite')

Vite configuration files are typically ESM-first; use ES module imports.

VueDevTools options

✓ import VueDevTools from 'vite-plugin-vue-devtools'; export default defineConfig({ plugins: [ VueDevTools({ componentInspector: false // Example option }), ], })

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.

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.

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import VueDevTools from 'vite-plugin-vue-devtools' export default defineConfig({ plugins: [ vue(), VueDevTools(), ], // Ensure your Vite project is configured for Vue 3 // For example, if using TypeScript, ensure 'vue' is correctly resolved // Example of an environment variable usage (if applicable for other plugins): // server: { // port: parseInt(process.env.PORT ?? '5173') // } })

Debug

Known issues

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

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.

affects: >=7.0.0

gotchaMultiple `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.

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.

affects: <8.0.4

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

fix

Upgrade to `vite-plugin-vue-devtools` version 8.0.2 or newer immediately to mitigate the security vulnerability associated with the `ip` package.

affects: <8.0.2

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

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.

affects: >=7.0.0

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

fix

Ensure your project's `vite` dependency satisfies the peer dependency range specified by `vite-plugin-vue-devtools`. Update or downgrade Vite if necessary.

affects: All versions

Errors

Common errors & fixes

Error: [vite-plugin-vue-devtools] The plugin function must return a plugin object.

The `VueDevTools` function was imported but not called as a function (e.g., `VueDevTools` instead of `VueDevTools()`) in the `plugins` array.

fix

Call the plugin function in your `vite.config.ts`:
```typescript
plugins: [
  VueDevTools(), // Corrected: call the function
  vue(),
],
```

Error: Cannot find module 'vite-plugin-vue-devtools'

The package was not installed, or the import path is incorrect, or an ESM-only package is being imported in a CommonJS context.

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

Vue DevTools (vite plugin) doesn't render as expected

Often related to conflicts with other Vite plugins, particularly those that manipulate HTML, or incorrect plugin order.

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.

Plugin fails when remote bindings are enabled (e.g., Cloudflare Workers D1)

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.

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.

Upgrade

Version history

8.1.1latest on npm

Audit

Dependencies

viterequiredPeer dependency for Vite-based projects. Required for the plugin to function.

Agent activity

24 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/vuejs/devtools ↗

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

homepagehttps://vuejs.org ↗