0
# Project Creation
1

2
Interactive project scaffolding system that creates new Vue.js applications with customizable configurations, preset handling, and feature selection.
3

4
## Capabilities
5

6
### Create Command
7

8
Creates a new Vue.js project with interactive prompts for feature selection and configuration.
9

10
```bash { .api }
11
/**
12
 * Create a new project powered by vue-cli-service
13
 * @param app-name - Name of the application/project directory
14
 */
15
vue create <app-name> [options]
16

17
Options:
18
  -p, --preset <presetName>      Skip prompts and use saved or remote preset
19
  -d, --default                  Skip prompts and use default preset
20
  -i, --inlinePreset <json>      Skip prompts and use inline JSON string as preset
21
  -m, --packageManager <command> Use specified npm client when installing dependencies
22
  -r, --registry <url>           Use specified npm registry when installing dependencies (only for npm)
23
  -g, --git [message]            Force git initialization with initial commit message
24
  -n, --no-git                   Skip git initialization
25
  -f, --force                    Overwrite target directory if it exists
26
  --merge                        Merge target directory if it exists
27
  -c, --clone                    Use git clone when fetching remote preset
28
  -x, --proxy <proxyUrl>         Use specified proxy when creating project
29
  -b, --bare                     Scaffold project without beginner instructions
30
  --skipGetStarted               Skip displaying "Get started" instructions
31
```
32

33
**Usage Examples:**
34

35
```bash
36
# Interactive project creation with prompts
37
vue create my-vue-app
38

39
# Use default preset (no prompts)
40
vue create my-vue-app --default
41

42
# Use saved preset
43
vue create my-vue-app --preset my-preset
44

45
# Use inline JSON preset
46
vue create my-vue-app --inlinePreset '{"useConfigFiles": true, "plugins": {"@vue/cli-plugin-router": {}}}'
47

48
# Force overwrite existing directory
49
vue create my-vue-app --force
50

51
# Use specific package manager
52
vue create my-vue-app --packageManager yarn
53

54
# Initialize with git and custom commit message
55
vue create my-vue-app --git "Initial commit"
56
```
57

58
### Init Command (Legacy)
59

60
Generates a project from a remote template using the legacy API (requires @vue/cli-init).
61

62
```bash { .api }
63
/**
64
 * Generate a project from a remote template (legacy API, requires @vue/cli-init)
65
 * @param template - Template name or GitHub repository URL
66
 * @param app-name - Name of the application/project directory
67
 */
68
vue init <template> <app-name> [options]
69

70
Options:
71
  -c, --clone     Use git clone when fetching remote template
72
  --offline       Use cached template
73
```
74

75
**Usage Examples:**
76

77
```bash
78
# Generate project from webpack template
79
vue init webpack my-project
80

81
# Generate from GitHub repository
82
vue init username/repo my-project
83

84
# Use git clone for fetching
85
vue init webpack my-project --clone
86

87
# Use cached template offline
88
vue init webpack my-project --offline
89
```
90

91
**Note:** This is a legacy API that requires the separate `@vue/cli-init` package to be installed. For new projects, use `vue create` instead.
92

93
### Creator Class (Programmatic)
94

95
Main project creation orchestrator for programmatic usage.
96

97
```typescript { .api }
98
/**
99
 * Creator handles the project creation workflow including prompts, preset resolution, and file generation
100
 */
101
class Creator extends EventEmitter {
102
  constructor(name: string, context: string, promptModules: PromptModule[]);
103
  
104
  /**
105
   * Create a new project with optional CLI options and preset
106
   * @param cliOptions - CLI options passed from command line
107
   * @param preset - Preset to use (if null, will prompt user)
108
   */
109
  create(cliOptions?: CreateOptions, preset?: Preset): Promise<void>;
110
  
111
  /**
112
   * Prompt user for project configuration and resolve preset
113
   * @param answers - Pre-filled answers (optional)
114
   * @returns Resolved preset configuration
115
   */
116
  promptAndResolvePreset(answers?: Answers): Promise<Preset>;
117
  
118
  /**
119
   * Resolve a preset by name from local or remote sources
120
   * @param name - Preset name or path/URL
121
   * @param clone - Whether to use git clone for remote presets
122
   * @returns Resolved preset object
123
   */
124
  resolvePreset(name: string, clone?: boolean): Promise<Preset>;
125
  
126
  /**
127
   * Resolve and configure plugins from raw plugin data
128
   * @param rawPlugins - Raw plugin configuration
129
   * @param pkg - Package.json content
130
   * @returns Resolved plugin configurations
131
   */
132
  resolvePlugins(rawPlugins: RawPlugins, pkg: PackageJson): Promise<PluginConfig[]>;
133
  
134
  /**
135
   * Get available presets for selection
136
   * @returns Object containing available presets
137
   */
138
  getPresets(): Record<string, Preset>;
139
  
140
  /**
141
   * Resolve introduction prompts for project creation
142
   * @returns Array of intro prompts
143
   */
144
  resolveIntroPrompts(): DistinctQuestion[];
145
  
146
  /**
147
   * Resolve outro prompts for project creation
148
   * @returns Array of outro prompts
149
   */
150
  resolveOutroPrompts(): DistinctQuestion[];
151
  
152
  /**
153
   * Resolve final prompts for project creation
154
   * @returns Array of final prompts
155
   */
156
  resolveFinalPrompts(): DistinctQuestion[];
157
  
158
  /**
159
   * Determine if git should be initialized based on CLI options
160
   * @param cliOptions - CLI options
161
   * @returns Whether to initialize git
162
   */
163
  shouldInitGit(cliOptions: CreateOptions): boolean;
164
  
165
  // Properties
166
  readonly name: string;
167
  readonly context: string;
168
  readonly presetPrompt: DistinctQuestion;
169
  readonly featurePrompt: DistinctQuestion;
170
  readonly outroPrompts: DistinctQuestion[];
171
  readonly injectedPrompts: DistinctQuestion[];
172
  readonly promptCompleteCbs: OnPromptCompleteCb[];
173
}
174
```
175

176
**Usage Examples:**
177

178
```typescript
179
import { Creator, getPromptModules } from "@vue/cli";
180

181
// Create a new project programmatically
182
const creator = new Creator("my-app", "/path/to/projects", getPromptModules());
183

184
// Create with default options
185
await creator.create();
186

187
// Create with specific options
188
await creator.create({
189
  packageManager: "yarn",
190
  git: true,
191
  force: true
192
});
193

194
// Create with preset
195
const preset = {
196
  useConfigFiles: true,
197
  plugins: {
198
    "@vue/cli-plugin-router": {},
199
    "@vue/cli-plugin-vuex": {}
200
  }
201
};
202
await creator.create({}, preset);
203
```
204

205
### Preset System
206

207
Configuration presets for reusable project templates.
208

209
```typescript { .api }
210
/**
211
 * Preset configuration object defining project features and plugins
212
 */
213
interface Preset {
214
  /** Whether to create a bare project without beginner instructions */
215
  bare?: boolean;
216
  /** Project name */
217
  projectName?: string;
218
  /** Whether to extract config to separate files instead of package.json */
219
  useConfigFiles?: boolean;
220
  /** Plugin configurations */
221
  plugins?: Record<string, any>;
222
  /** Additional configurations */
223
  configs?: Record<string, any>;
224
  /** CSS preprocessor choice */
225
  cssPreprocessor?: 'sass' | 'dart-sass' | 'less' | 'stylus';
226
  /** Custom properties */
227
  [props: string]: any;
228
}
229

230
/**
231
 * CLI options for project creation
232
 */
233
interface CreateOptions {
234
  /** Current working directory */
235
  cwd?: string;
236
  /** Proxy URL for package installation */
237
  proxy?: string;
238
  /** Package manager to use (npm, yarn, pnpm) */
239
  packageManager?: string;
240
  /** NPM registry URL */
241
  registry?: string;
242
  /** Git initialization (boolean or commit message) */
243
  git?: boolean | string;
244
  /** Force overwrite existing directory */
245
  force?: boolean;
246
  /** Merge with existing directory */
247
  merge?: boolean;
248
  /** Use git clone for remote presets */
249
  clone?: boolean;
250
  /** Create bare project */
251
  bare?: boolean;
252
  /** Skip get started instructions */
253
  skipGetStarted?: boolean;
254
}
255
```
256

257
### Feature Selection
258

259
Interactive prompts for selecting project features during creation.
260

261
```typescript { .api }
262
/**
263
 * Prompt modules provide feature selection during project creation
264
 */
265
interface PromptModule {
266
  (api: PromptModuleAPI): void;
267
}
268

269
/**
270
 * Available prompt modules for feature selection:
271
 */
272
const promptModules = {
273
  /** Babel transpilation configuration */
274
  babel: PromptModule;
275
  /** CSS preprocessor selection (Sass, Less, Stylus) */
276
  cssPreprocessors: PromptModule;
277
  /** End-to-end testing framework selection */
278
  e2e: PromptModule;
279
  /** ESLint configuration and rules */
280
  linter: PromptModule;
281
  /** Progressive Web App features */
282
  pwa: PromptModule;
283
  /** Vue Router configuration */
284
  router: PromptModule;
285
  /** TypeScript configuration */
286
  typescript: PromptModule;
287
  /** Unit testing framework selection */
288
  unit: PromptModule;
289
  /** Vue version selection (2.x vs 3.x) */
290
  vueVersion: PromptModule;
291
  /** Vuex state management */
292
  vuex: PromptModule;
293
};
294
```
295

296
### Default Presets
297

298
Built-in presets available for project creation.
299

300
```typescript { .api }
301
/**
302
 * Default Vue 3 preset
303
 */
304
const defaultVue3Preset: Preset = {
305
  useConfigFiles: false,
306
  cssPreprocessor: undefined,
307
  plugins: {
308
    "@vue/cli-plugin-babel": {},
309
    "@vue/cli-plugin-eslint": {
310
      config: "base",
311
      lintOn: ["save"]
312
    }
313
  }
314
};
315

316
/**
317
 * Default Vue 2 preset
318
 */
319
const defaultVue2Preset: Preset = {
320
  vueVersion: "2",
321
  useConfigFiles: false,
322
  cssPreprocessor: undefined,
323
  plugins: {
324
    "@vue/cli-plugin-babel": {},
325
    "@vue/cli-plugin-eslint": {
326
      config: "base",
327
      lintOn: ["save"]
328
    }
329
  }
330
};
331
```