vite-plugin-vue-inspector

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

MIT 84 个版本
安装
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