0
# Plugin Configuration
1

2
Configuration options and setup for the Vite Plugin Vue DevTools, including customization of DevTools behavior, component inspection, and editor integration.
3

4
## Core Imports
5

6
```typescript
7
import VueDevTools from "vite-plugin-vue-devtools";
8
import type { VitePluginVueDevToolsOptions } from "vite-plugin-vue-devtools";
9
```
10

11
## Capabilities
12

13
### Main Plugin Function
14

15
Creates an array of Vite plugins that enable Vue DevTools integration during development.
16

17
```typescript { .api }
18
/**
19
 * Creates Vue DevTools Vite plugin with optional configuration
20
 * @param options - Plugin configuration options
21
 * @returns Array of Vite plugins for DevTools functionality
22
 */
23
function VitePluginVueDevTools(options?: VitePluginVueDevToolsOptions): PluginOption;
24
```
25

26
**Usage Examples:**
27

28
```typescript
29
import { defineConfig } from 'vite'
30
import vue from '@vitejs/plugin-vue'
31
import VueDevTools from 'vite-plugin-vue-devtools'
32

33
// Basic usage with default options
34
export default defineConfig({
35
  plugins: [
36
    vue(),
37
    VueDevTools(),
38
  ],
39
})
40

41
// With custom configuration
42
export default defineConfig({
43
  plugins: [
44
    vue(),
45
    VueDevTools({
46
      launchEditor: 'webstorm',
47
      componentInspector: {
48
        toggleComboKey: 'control-shift',
49
        toggleButtonVisibility: 'active',
50
      },
51
      appendTo: /main\.(js|ts)$/,
52
    }),
53
  ],
54
})
55
```
56

57
### Configuration Options
58

59
Plugin configuration interface with options for customizing DevTools behavior.
60

61
```typescript { .api }
62
interface VitePluginVueDevToolsOptions {
63
  /** 
64
   * Append import to module ending with pattern instead of script tag
65
   * Useful for non-HTML entry points
66
   * @default ''
67
   */
68
  appendTo?: string | RegExp;
69
  
70
  /** 
71
   * Enable Vue component inspector functionality
72
   * @default true
73
   */
74
  componentInspector?: boolean | VitePluginInspectorOptions;
75
  
76
  /** 
77
   * Target editor when opening files from DevTools
78
   * @default 'code'
79
   */
80
  launchEditor?: EditorType;
81
  
82
  /** 
83
   * @deprecated Removed in v7.1.0 - Host auto-detected
84
   */
85
  openInEditorHost?: string | false;
86
  
87
  /** 
88
   * @deprecated Removed in v7.1.0 - Host auto-detected
89
   */
90
  clientHost?: string | false;
91
}
92

93
type EditorType = 
94
  | 'appcode' | 'atom' | 'atom-beta' | 'brackets' | 'clion' 
95
  | 'code' | 'code-insiders' | 'codium' | 'emacs' | 'idea' 
96
  | 'notepad++' | 'pycharm' | 'phpstorm' | 'rubymine' 
97
  | 'sublime' | 'vim' | 'visualstudio' | 'webstorm' | 'rider' 
98
  | string;
99

100
// Inspector-specific configuration options (from vite-plugin-vue-inspector)
101
interface VitePluginInspectorOptions {
102
  toggleComboKey?: string;
103
  toggleButtonVisibility?: 'always' | 'active' | 'never';
104
  appendTo?: string | RegExp;
105
  openInEditor?: boolean;
106
  launchEditor?: EditorType;
107
}
108
```
109

110
### Default Configuration
111

112
The plugin uses sensible defaults for development workflows.
113

114
```typescript { .api }
115
const defaultOptions: VitePluginVueDevToolsOptions = {
116
  appendTo: '',
117
  componentInspector: true,
118
  launchEditor: process.env.LAUNCH_EDITOR ?? 'code',
119
};
120
```
121

122
## Plugin Behavior
123

124
### Vite Plugin Hooks
125

126
The plugin implements several Vite plugin hooks for seamless integration:
127

128
- **configResolved**: Stores resolved Vite configuration for internal use
129
- **configureServer**: Sets up development server middleware and RPC communication
130
- **resolveId**: Handles virtual module resolution for DevTools resources
131
- **load**: Loads virtual modules and DevTools-specific resources
132
- **transform**: Transforms code to inject DevTools imports when using `appendTo`
133
- **transformIndexHtml**: Injects DevTools scripts into HTML entry points
134
- **buildEnd**: Plugin cleanup operations
135

136
### Virtual Modules
137

138
The plugin creates virtual modules for internal functionality:
139

140
- `virtual:vue-devtools-options`: Exposes plugin configuration to client code
141
- `virtual:vue-devtools-path:*`: Resolves DevTools resource paths dynamically
142

143
### Development Server Integration
144

145
When the development server starts, the plugin:
146

147
1. Sets up middleware to serve DevTools client at `/__devtools__` endpoint
148
2. Establishes RPC communication between server and client
149
3. Integrates with Vite's module graph for real-time updates
150
4. Configures component inspector if enabled
151
5. Displays DevTools URLs in server startup logs
152

153
**Server Output Example:**
154

155
```
156
➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
157
➜  Vue DevTools: Press Option(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
158
```