vite-plugin-vue-inspector

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

MIT 84 个版本

debug devtools inspector vite vite-plugin vscode vue

主页

仓库

提交 Issue

安装

npm install vite-plugin-vue-inspector

yarn add vite-plugin-vue-inspector

pnpm add vite-plugin-vue-inspector

bun add vite-plugin-vue-inspector

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

pnpm add -D vite-plugin-vue-inspector

Vite

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:

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:

Inspector({
  viteDevtools: true,
})

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

Options

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:

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

Headless helpers are also available:

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

To use the built-in DOM overlay directly:

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

Playgrounds

pnpm play:vue
pnpm play:nuxt

版本列表

7.0.0 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

4.0.0 2023-10-03

3.7.2 2023-10-01

3.7.1 2023-09-10

3.7.0 2023-09-09

3.6.0 2023-08-08

3.5.0 2023-07-24

3.4.2 2023-05-09

3.4.1 2023-04-28

3.4.0 2023-03-18

3.3.2 2023-02-08

3.3.1 2023-02-04

3.3.0 2023-02-03

3.2.2 2023-02-03

3.2.1 2023-01-18

3.2.0 2023-01-17

3.1.3 2023-01-16

3.1.2 2023-01-14

3.1.1 2023-01-13

3.1.0 2023-01-13

3.0.4 2023-01-12

3.0.3 2023-01-12

3.0.2 2023-01-11

3.0.1 2023-01-06

3.0.0-beta.0 2023-01-03

3.0.0 2023-01-06

2.0.4 2022-12-19

2.0.3 2022-12-18

2.0.2 2022-12-15

2.0.1 2022-12-12

2.0.0 2022-12-11

1.1.4 2022-11-10

1.1.3 2022-09-18

1.1.2 2022-09-07

1.1.1 2022-07-27

1.1.0 2022-07-27

1.0.1 2022-05-20

1.0.0 2022-05-19

0.5.8 2022-05-17

0.5.7 2022-05-08

0.5.6 2022-05-07

0.5.5 2022-05-05

0.5.4 2022-05-05

0.5.3 2022-04-29

0.5.2 2022-04-29

0.5.1 2022-04-29

0.5.0 2022-04-29

0.4.2 2022-04-29

0.4.1 2022-04-28

0.4.0 2022-04-23

0.3.0 2022-04-05

0.2.8 2022-04-05

0.2.7 2022-04-05

0.2.6 2022-04-05

0.2.5 2022-03-26

0.2.4 2022-03-26

0.2.3 2022-03-26

0.2.2 2022-03-24

0.2.1 2022-03-23

0.2.0 2022-03-23

0.1.9 2022-03-21

0.1.8 2022-03-20

0.1.7 2022-03-20

0.1.6 2022-03-20

0.1.5 2022-03-20

0.1.4 2022-03-19

0.1.3 2022-03-19

0.1.2 2022-03-19

0.1.1 2022-03-19

0.1.0 2022-03-19