# vite-plugin-vue-inspector

> Jump to local IDE source code when clicking Vue elements in the browser.

Latest version **7.0.0** (published 2026-06-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install vite-plugin-vue-inspector
pnpm add vite-plugin-vue-inspector
yarn add vite-plugin-vue-inspector
bun add vite-plugin-vue-inspector
```

## Health

**Score 60/100 (C)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 7.0.0 |
| Published | 2026-06-08 |
| First published | 2022-03-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 6 |
| Unpacked size | 211.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| Author | webfansplz |
| Maintainers | antfu, webfansplz |
| Keywords | debug, devtools, inspector, vite, vite-plugin, vscode, vue |

## Links

- npm: https://www.npmjs.com/package/vite-plugin-vue-inspector
- Repository: https://github.com/webfansplz/vite-plugin-vue-inspector
- Homepage: https://github.com/webfansplz/vite-plugin-vue-inspector#readme
- Issues: https://github.com/webfansplz/vite-plugin-vue-inspector/issues
- npm.io page: https://npm.io/package/vite-plugin-vue-inspector

## Dependencies (6)

- [kolorist](https://npm.io/package/kolorist.md) ^1.8.0
- [nanoevents](https://npm.io/package/nanoevents.md) ^9.1.0
- [magic-string](https://npm.io/package/magic-string.md) ^0.30.21
- [estree-walker](https://npm.io/package/estree-walker.md) ^3.0.3
- [source-map-js](https://npm.io/package/source-map-js.md) ^1.2.1
- [@vue/compiler-dom](https://npm.io/package/@vue/compiler-dom.md) ^3.5.35

## Alternatives

- [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads
- [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads
- [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads
- [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads
- [aws-elasticsearch-connector](https://npm.io/package/aws-elasticsearch-connector.md) — 37.4K weekly downloads

## Recent versions

- 7.0.0 (latest) — 2026-06-08
- 6.0.0 — 2026-05-07
- 5.4.0 — 2026-03-13
- 5.3.2 — 2025-06-23
- 5.3.1 — 2024-11-28
- 5.3.0 — 2024-11-25
- 5.2.0 — 2024-09-02
- 5.1.3 — 2024-07-23
- 5.1.2 — 2024-05-24
- 5.1.1 — 2024-05-23
- 5.1.0 — 2024-05-08
- 5.0.1 — 2024-04-19
- 5.0.0 — 2024-04-14
- 4.0.2 — 2023-12-05
- 4.0.1 — 2023-12-04
- … 69 more at https://npm.io/package/vite-plugin-vue-inspector/versions

## README

# vite-plugin-vue-inspector

Jump from a Vue element in the browser to its source file in your editor.

This package is Vue 3 and Vite only. It records source locations from Vue's compiled render output with Vite source maps, so it no longer injects visible `data-v-inspector` attributes into the DOM. The browser overlay is drawn by `client/overlay` with DOM/SVG APIs instead of a Vue SFC. It can also register itself as a Vite DevTools dock action through `@vitejs/devtools-kit`.

## Install

```bash
pnpm add -D vite-plugin-vue-inspector
```

## Vite

```ts
import Vue from '@vitejs/plugin-vue'
import Inspector from 'vite-plugin-vue-inspector'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [Vue(), Inspector()],
})
```

Press `Command+Shift` on macOS or `Ctrl+Shift` on Windows/Linux to toggle the inspector. Click a highlighted element to open the source location in your editor.

## Nuxt

Use the Vite plugin directly and append the client loader to Nuxt's entry module:

```ts
import Inspector from 'vite-plugin-vue-inspector'
import { defineNuxtConfig } from 'nuxt/config'

export default defineNuxtConfig({
  vite: {
    plugins: [
      Inspector({
        appendTo: /\/entry\.m?js$/,
      }),
    ],
  },
})
```

## Vite DevTools

Vite DevTools integration is enabled by default:

```ts
Inspector({
  viteDevtools: true,
})
```

When the dock action is activated, the inspector is enabled and editor opening goes through the Vite DevTools RPC.

## Options

```ts
interface VitePluginInspectorOptions {
  enabled?: boolean
  toggleComboKey?: string | false
  toggleButtonVisibility?: 'always' | 'active' | 'never'
  toggleButtonPos?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left'
  appendTo?: string | RegExp
  lazyLoad?: number | false
  disableInspectorOnEditorOpen?: boolean
  launchEditor?: string
  reduceMotion?: boolean
  viteDevtools?: boolean
}
```

## Client API

The overlay exposes a browser control object:

```ts
window.__VUE_INSPECTOR__?.enable()
window.__VUE_INSPECTOR__?.disable()
window.__VUE_INSPECTOR__?.toggleEnabled()
```

Headless helpers are also available:

```ts
import {
  events,
  findTraceAtPointer,
  findTraceFromElement,
  isEnabled,
} from 'vite-plugin-vue-inspector/client/listeners'
```

To use the built-in DOM overlay directly:

```ts
if (import.meta.hot) import('vite-plugin-vue-inspector/client/overlay')
```

## Playgrounds

```bash
pnpm play:vue
pnpm play:nuxt
```

---
_Source: https://npm.io/package/vite-plugin-vue-inspector · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._