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