0
# Plugin Management
1

2
Vue CLI plugin system for extending project functionality through generators, service plugins, and prompt modules.
3

4
## Capabilities
5

6
### Add Command
7

8
Install and invoke a plugin's generator in an existing Vue CLI project.
9

10
```bash { .api }
11
/**
12
 * Install a plugin and invoke its generator in an already created project
13
 * @param plugin - Plugin name or package name
14
 * @param pluginOptions - Additional options passed to the plugin
15
 */
16
vue add <plugin> [pluginOptions]
17

18
Options:
19
  --registry <url>    Use specified npm registry when installing dependencies (only for npm)
20
```
21

22
**Usage Examples:**
23

24
```bash
25
# Add Vue Router
26
vue add @vue/router
27

28
# Add Vuex state management
29
vue add @vue/vuex
30

31
# Add TypeScript support
32
vue add @vue/typescript
33

34
# Add PWA features
35
vue add @vue/pwa
36

37
# Add testing framework
38
vue add @vue/unit-jest
39

40
# Add plugin with custom registry
41
vue add my-plugin --registry https://registry.example.com
42

43
# Add plugin with options (passed to plugin)
44
vue add my-plugin --mode production --feature advanced
45
```
46

47
### Invoke Command
48

49
Invoke a plugin's generator without installing (for already installed plugins).
50

51
```bash { .api }
52
/**
53
 * Invoke the generator of a plugin in an already created project
54
 * @param plugin - Plugin name or package name
55
 * @param pluginOptions - Additional options passed to the plugin
56
 */
57
vue invoke <plugin> [pluginOptions]
58

59
Options:
60
  --registry <url>    Use specified npm registry when installing dependencies (only for npm)
61
```
62

63
**Usage Examples:**
64

65
```bash
66
# Re-invoke router plugin (useful after updates)
67
vue invoke @vue/router
68

69
# Invoke plugin with specific options
70
vue invoke @vue/eslint --config airbnb
71

72
# Invoke plugin with multiple options
73
vue invoke my-plugin --feature a --feature b --config custom
74
```
75

76
### Add Function (Programmatic)
77

78
Programmatic interface for adding plugins to projects.
79

80
```typescript { .api }
81
/**
82
 * Add a plugin to an existing project programmatically
83
 * @param pluginToAdd - Plugin name with optional version (e.g., "router@^1.0.0")
84
 * @param options - Installation and configuration options
85
 * @param context - Project directory path
86
 */
87
async function add(
88
  pluginToAdd: string,
89
  options?: AddOptions,
90
  context?: string
91
): Promise<void>;
92

93
interface AddOptions {
94
  /** NPM registry URL for plugin installation */
95
  registry?: string;
96
  /** Additional options passed to plugin generator */
97
  [key: string]: any;
98
}
99
```
100

101
**Usage Examples:**
102

103
```typescript
104
import { add } from "@vue/cli";
105

106
// Add router plugin
107
await add("@vue/router", {}, "/path/to/project");
108

109
// Add plugin with options
110
await add("@vue/typescript", {
111
  classComponent: false,
112
  useTsWithBabel: true
113
}, "/path/to/project");
114

115
// Add plugin from custom registry
116
await add("my-plugin", {
117
  registry: "https://registry.example.com"
118
}, "/path/to/project");
119
```
120

121
### Invoke Function (Programmatic)
122

123
Programmatic interface for invoking plugin generators.
124

125
```typescript { .api }
126
/**
127
 * Invoke a plugin generator programmatically
128
 * @param pluginName - Plugin name to invoke
129
 * @param options - Options passed to plugin generator
130
 * @param context - Project directory path
131
 */
132
async function invoke(
133
  pluginName: string,
134
  options?: InvokeOptions,
135
  context?: string
136
): Promise<void>;
137

138
interface InvokeOptions {
139
  /** NPM registry URL */
140
  registry?: string;
141
  /** Additional options passed to plugin generator */
142
  [key: string]: any;
143
}
144
```
145

146
**Usage Examples:**
147

148
```typescript
149
import { invoke } from "@vue/cli";
150

151
// Invoke router plugin
152
await invoke("@vue/router", {}, "/path/to/project");
153

154
// Invoke with specific options
155
await invoke("@vue/eslint", {
156
  config: "airbnb",
157
  lintOn: ["save", "commit"]
158
}, "/path/to/project");
159
```
160

161
### Plugin Resolution
162

163
Plugin name resolution and identification system.
164

165
```typescript { .api }
166
/**
167
 * Resolve plugin ID from short name
168
 * @param id - Short plugin name (e.g., "router", "@vue/router")
169
 * @returns Full plugin package name
170
 */
171
function resolvePluginId(id: string): string;
172

173
/**
174
 * Check if a plugin is an official Vue CLI plugin
175
 * @param id - Plugin ID or package name
176
 * @returns Whether the plugin is official
177
 */
178
function isOfficialPlugin(id: string): boolean;
179

180
/**
181
 * Plugin name patterns:
182
 * - "router" -> "@vue/cli-plugin-router"
183
 * - "@vue/router" -> "@vue/cli-plugin-router"
184
 * - "vue-cli-plugin-custom" -> "vue-cli-plugin-custom"
185
 * - "@scope/vue-cli-plugin-custom" -> "@scope/vue-cli-plugin-custom"
186
 */
187
```
188

189
**Usage Examples:**
190

191
```typescript
192
import { resolvePluginId, isOfficialPlugin } from "@vue/cli-shared-utils";
193

194
// Resolve plugin names
195
console.log(resolvePluginId("router")); // "@vue/cli-plugin-router"
196
console.log(resolvePluginId("@vue/router")); // "@vue/cli-plugin-router"
197
console.log(resolvePluginId("my-plugin")); // "vue-cli-plugin-my-plugin"
198

199
// Check if official
200
console.log(isOfficialPlugin("@vue/cli-plugin-router")); // true
201
console.log(isOfficialPlugin("vue-cli-plugin-custom")); // false
202
```
203

204
### Plugin Types
205

206
Different types of plugins in the Vue CLI ecosystem.
207

208
```typescript { .api }
209
/**
210
 * Generator Plugin - Modifies project files during installation/invocation
211
 */
212
type GeneratorPlugin = (
213
  api: GeneratorAPI,
214
  options: any,
215
  rootOptions: Preset,
216
  invoking: boolean
217
) => any;
218

219
/**
220
 * Service Plugin - Extends webpack config and adds CLI commands
221
 * Located in vue-cli-service, not @vue/cli, but managed through plugin system
222
 */
223
interface ServicePlugin {
224
  (api: ServicePluginAPI, options: any): void;
225
}
226

227
/**
228
 * Prompt Module - Adds interactive prompts during project creation
229
 */
230
type PromptModule = (api: PromptModuleAPI) => void;
231
```
232

233
### Plugin Installation Process
234

235
The plugin installation and invocation workflow.
236

237
```typescript { .api }
238
/**
239
 * Plugin installation process:
240
 * 1. Resolve plugin name to full package name
241
 * 2. Install plugin package via npm/yarn/pnpm
242
 * 3. Load plugin's generator function
243
 * 4. Create GeneratorAPI instance
244
 * 5. Execute plugin generator with project context
245
 * 6. Apply file modifications and package.json updates
246
 * 7. Run post-install hooks and display completion messages
247
 */
248

249
/**
250
 * Plugin structure in package.json:
251
 */
252
interface PluginPackageJson {
253
  /** Plugin generator entry point */
254
  generator?: string;
255
  /** Plugin index file (for service plugins) */
256
  main?: string;
257
  /** Vue CLI plugin metadata */
258
  vuePlugins?: {
259
    service?: string;
260
    generator?: string;
261
    prompts?: string;
262
  };
263
}
264
```
265

266
### Built-in Plugins
267

268
Official Vue CLI plugins available for installation.
269

270
```typescript { .api }
271
/**
272
 * Official Vue CLI plugins:
273
 */
274
const officialPlugins = {
275
  /** Babel transpilation */
276
  "@vue/cli-plugin-babel": "JavaScript transpilation with Babel",
277
  /** ESLint linting */
278
  "@vue/cli-plugin-eslint": "Code linting with ESLint",
279
  /** Vue Router */
280
  "@vue/cli-plugin-router": "Single-page app routing",
281
  /** Vuex state management */
282
  "@vue/cli-plugin-vuex": "Centralized state management",
283
  /** TypeScript support */
284
  "@vue/cli-plugin-typescript": "TypeScript language support",
285
  /** Progressive Web App features */
286
  "@vue/cli-plugin-pwa": "PWA features and service worker",
287
  /** Jest unit testing */
288
  "@vue/cli-plugin-unit-jest": "Unit testing with Jest",
289
  /** Mocha unit testing */
290
  "@vue/cli-plugin-unit-mocha": "Unit testing with Mocha",
291
  /** Cypress end-to-end testing */
292
  "@vue/cli-plugin-e2e-cypress": "E2E testing with Cypress",
293
  /** Nightwatch end-to-end testing */
294
  "@vue/cli-plugin-e2e-nightwatch": "E2E testing with Nightwatch"
295
};
296
```
297

298
### Error Handling
299

300
Common errors and troubleshooting for plugin management.
301

302
```typescript { .api }
303
/**
304
 * Common plugin management errors:
305
 * 
306
 * - Plugin not found: Plugin package doesn't exist or name is incorrect
307
 * - Git dirty warning: Working directory has uncommitted changes
308
 * - Version conflicts: Plugin requires different Vue CLI version
309
 * - Network errors: Unable to download plugin from registry
310
 * - Generator errors: Plugin generator fails during execution
311
 * - Permission errors: Insufficient permissions to modify files
312
 */
313

314
/**
315
 * Error handling patterns:
316
 */
317
interface PluginError extends Error {
318
  code?: string;
319
  plugin?: string;
320
  details?: any;
321
}
322
```