0
# Vite Plugin Vue DevTools
1
2
A Vite plugin that integrates Vue DevTools into Vue.js applications during development. This plugin enhances the development experience by enabling comprehensive debugging, component inspection, and state management analysis directly within the browser's developer tools without requiring browser extensions.
3
4
## Package Information
5
6
- **Package Name**: vite-plugin-vue-devtools
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm add -D vite-plugin-vue-devtools`
10
11
## Core Imports
12
13
```typescript
14
import VueDevTools from "vite-plugin-vue-devtools";
15
```
16
17
For CommonJS:
18
19
```javascript
20
const VueDevTools = require("vite-plugin-vue-devtools");
21
```
22
23
## Basic Usage
24
25
```typescript
26
import { defineConfig } from 'vite'
27
import vue from '@vitejs/plugin-vue'
28
import VueDevTools from 'vite-plugin-vue-devtools'
29
30
export default defineConfig({
31
plugins: [
32
vue(),
33
VueDevTools(),
34
],
35
})
36
```
37
38
## Architecture
39
40
The Vite Plugin Vue DevTools is built around several key components:
41
42
- **Plugin Factory**: Main function that creates an array of Vite plugins for DevTools integration
43
- **RPC Server**: Communication layer between the development server and DevTools client
44
- **Asset Management**: Server-side functionality for scanning and analyzing project assets
45
- **Module Graph**: Dependency analysis and module relationship tracking
46
- **Client Overlay**: Browser-side integration that injects DevTools functionality
47
- **Component Inspector**: Vue component inspection capabilities through vite-plugin-vue-inspector
48
49
## Capabilities
50
51
### Plugin Configuration
52
53
Main plugin factory function with comprehensive configuration options for customizing DevTools behavior and integration.
54
55
```typescript { .api }
56
function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption;
57
58
interface VitePluginVueDevToolsOptions {
59
appendTo?: string | RegExp;
60
componentInspector?: boolean | VitePluginInspectorOptions;
61
launchEditor?: string;
62
openInEditorHost?: string | false; // Deprecated in v7.1.0
63
clientHost?: string | false; // Deprecated in v7.1.0
64
}
65
```
66
67
[Plugin Configuration](./plugin-configuration.md)
68
69
### Asset Analysis
70
71
Server-side RPC functions for analyzing and managing project assets including images, videos, fonts, and other static resources.
72
73
```typescript { .api }
74
function getStaticAssets(): Promise<AssetInfo[]>;
75
function getAssetImporters(url: string): Promise<AssetImporter[]>;
76
function getImageMeta(filepath: string): Promise<ImageMeta | undefined>;
77
function getTextAssetContent(filepath: string, limit?: number): Promise<string | undefined>;
78
```
79
80
[Asset Analysis](./asset-analysis.md)
81
82
### Module Graph Analysis
83
84
Module dependency tracking and analysis for Vue/JS/TS files with real-time updates during development.
85
86
```typescript { .api }
87
function getGraphModules(): Promise<ModuleInfo[]>;
88
```
89
90
[Module Graph Analysis](./module-graph.md)
91
92
### Server Communication
93
94
Core RPC communication functions for DevTools server connectivity and health monitoring.
95
96
```typescript { .api }
97
function heartbeat(): boolean;
98
function getRoot(): string;
99
```
100
101
[Server Communication](./server-communication.md)
102
103
## Types
104
105
```typescript { .api }
106
interface AssetInfo {
107
path: string;
108
relativePath: string;
109
publicPath: string;
110
filePath: string;
111
type: AssetType;
112
size: number;
113
mtime: number;
114
}
115
116
interface AssetImporter {
117
url: string | null;
118
id: string | null;
119
}
120
121
interface ModuleInfo {
122
id: string;
123
deps: string[];
124
}
125
126
type AssetType = 'image' | 'video' | 'audio' | 'font' | 'text' | 'wasm' | 'other';
127
```