0
# Project Generation
1

2
Generator function for scaffolding TypeScript support in Vue projects with dependency management, template rendering, and plugin integration.
3

4
## Capabilities
5

6
### Generator Function
7

8
Main generator function that handles project scaffolding and dependency setup.
9

10
```javascript { .api }
11
/**
12
 * Generator function for adding TypeScript support to Vue projects
13
 * Manages dependencies, renders templates, and integrates with other Vue CLI plugins
14
 * @param api - Generator API instance providing project modification methods
15
 * @param options - TypeScript configuration options from user prompts
16
 * @param rootOptions - Root project options including Vue version
17
 * @param invoking - Whether plugin is being invoked late (after initial project creation)
18
 */
19
function generator(
20
  api, 
21
  options: GeneratorOptions, 
22
  rootOptions?: RootOptions, 
23
  invoking?: boolean
24
): void;
25

26
interface GeneratorOptions {
27
  classComponent?: boolean;    // Use class-style component syntax
28
  useTsWithBabel?: boolean;    // Use Babel alongside TypeScript (affects target compilation)
29
  skipLibCheck?: boolean;      // Skip type checking of declaration files (default: true)
30
  convertJsToTs?: boolean;     // Convert all .js files to .ts
31
  allowJs?: boolean;           // Allow .js files to be compiled
32
}
33

34
interface RootOptions {
35
  vueVersion?: string;         // Vue major version ('2' or '3')
36
  [key: string]: any;          // Additional project options
37
}
38
```
39

40
**Usage Example:**
41

42
```javascript
43
// Applied automatically by Vue CLI during project setup
44
// Manual usage in a Vue CLI generator context:
45
const generator = require('@vue/cli-plugin-typescript/generator');
46

47
// Called by Vue CLI with user-selected options
48
generator(api, {
49
  classComponent: true,
50
  useTsWithBabel: false,
51
  skipLibCheck: true,
52
  convertJsToTs: true,
53
  allowJs: false
54
}, { vueVersion: '3' });
55
```
56

57
### Dependency Management
58

59
Automatic dependency installation based on configuration options.
60

61
```javascript { .api }
62
/**
63
 * Package dependency configuration automatically applied by generator
64
 * Adds TypeScript and related dependencies to package.json
65
 */
66

67
// Always added:
68
const baseDependencies = {
69
  devDependencies: {
70
    typescript: string // Version from plugin's package.json
71
  }
72
};
73

74
// Added when classComponent is true (Vue 2):
75
const vue2ClassDependencies = {
76
  dependencies: {
77
    'vue-class-component': string,     // From plugin's devDependencies
78
    'vue-property-decorator': string   // From plugin's devDependencies
79
  }
80
};
81

82
// Added when classComponent is true (Vue 3):
83
const vue3ClassDependencies = {
84
  dependencies: {
85
    'vue-class-component': '^8.0.0-0'
86
  }
87
};
88
```
89

90
### Template Rendering
91

92
Template file rendering based on project configuration.
93

94
```javascript { .api }
95
/**
96
 * Template rendering configuration
97
 * Renders TypeScript project templates to the target directory
98
 */
99
const templateOptions = {
100
  skipLibCheck: boolean,        // From options.skipLibCheck
101
  hasMocha: boolean,           // api.hasPlugin('unit-mocha')
102
  hasJest: boolean,            // api.hasPlugin('unit-jest')  
103
  hasWebDriverIO: boolean      // api.hasPlugin('e2e-webdriverio')
104
};
105

106
// Vue 3 specific template rendering
107
if (rootOptions.vueVersion === '3') {
108
  // Renders additional Vue 3 templates
109
  // Removes unnecessary shims-tsx.d.ts for Vue 3
110
}
111
```
112

113
### Plugin Integration
114

115
Late invocation support for existing projects with other plugins.
116

117
```javascript { .api }
118
/**
119
 * Plugin integration when TypeScript is added to existing projects
120
 * Automatically configures TypeScript support for installed plugins
121
 */
122

123
// Unit testing integration
124
if (api.hasPlugin('unit-mocha')) {
125
  require('@vue/cli-plugin-unit-mocha/generator').applyTS(api);
126
}
127

128
if (api.hasPlugin('unit-jest')) {
129
  require('@vue/cli-plugin-unit-jest/generator').applyTS(api);
130
}
131

132
// Linting integration  
133
if (api.hasPlugin('eslint')) {
134
  require('@vue/cli-plugin-eslint/generator').applyTS(api);
135
}
136

137
// E2E testing integration
138
if (api.hasPlugin('e2e-webdriverio')) {
139
  require('@vue/cli-plugin-e2e-webdriverio/generator').applyTS(api);
140
}
141
```
142

143
### Template Files
144

145
Generated template files for TypeScript projects:
146

147
```javascript { .api }
148
/**
149
 * Template files rendered during project generation
150
 * Located in generator/template/ and generator/template-vue3/
151
 */
152

153
// TypeScript declaration files
154
const templateFiles = {
155
  'src/shims-vue.d.ts': 'Vue module declarations for TypeScript',
156
  'src/shims-tsx.d.ts': 'JSX/TSX support declarations (Vue 2 only)',
157
  'tsconfig.json': 'TypeScript compiler configuration'
158
};
159

160
// Vue 3 specific templates
161
const vue3Templates = {
162
  'src/shims-vue.d.ts': 'Vue 3 specific module declarations'
163
  // Note: shims-tsx.d.ts not needed in Vue 3
164
};
165
```
166

167
### Generator Execution Order
168

169
Plugin execution priority configuration:
170

171
```javascript { .api }
172
/**
173
 * Generator execution order configuration
174
 * Ensures TypeScript plugin runs after router plugin
175
 */
176
generator.after = '@vue/cli-plugin-router';
177
```
178

179
### TypeScript Configuration Template
180

181
Generated TypeScript compiler configuration with conditional options:
182

183
```javascript { .api }
184
/**
185
 * Generated tsconfig.json template with conditional compilation options
186
 * Options are rendered based on generator configuration
187
 */
188
const tsconfigTemplate = {
189
  "compilerOptions": {
190
    "target": string,                    // "esnext" when useTsWithBabel: true, "es5" when false
191
    "module": "esnext",
192
    "strict": true,
193
    "jsx": "preserve",
194
    "importHelpers": boolean,            // true when useTsWithBabel: false
195
    "moduleResolution": "node",
196
    "experimentalDecorators": boolean,   // true when classComponent enabled
197
    "allowJs": boolean,                  // from allowJs option
198
    "skipLibCheck": boolean,             // from skipLibCheck option (default: true)
199
    "esModuleInterop": true,
200
    "allowSyntheticDefaultImports": true,
201
    "forceConsistentCasingInFileNames": true,
202
    "useDefineForClassFields": true,
203
    "sourceMap": true,
204
    "baseUrl": ".",
205
    "types": [
206
      "webpack-env",
207
      // Conditional test framework types:
208
      "mocha", "chai",                   // When unit-mocha plugin present
209
      "jest",                           // When unit-jest plugin present  
210
      "@wdio/mocha-framework",          // When e2e-webdriverio plugin present
211
      "expect-webdriverio",
212
      "webdriverio/sync"
213
    ],
214
    "paths": {
215
      "@/*": ["src/*"]
216
    },
217
    "lib": [
218
      "esnext",
219
      "dom", 
220
      "dom.iterable",
221
      "scripthost"
222
    ]
223
  },
224
  "include": [
225
    "src/**/*.ts",
226
    "src/**/*.tsx", 
227
    "src/**/*.vue",
228
    "tests/**/*.ts",
229
    "tests/**/*.tsx"
230
  ],
231
  "exclude": ["node_modules"]
232
};
233
```
234

235
### Vue Module Declarations
236

237
TypeScript declaration files for Vue support:
238

239
```typescript { .api }
240
// src/shims-vue.d.ts (Vue 2)
241
declare module '*.vue' {
242
  import Vue from 'vue'
243
  export default Vue
244
}
245

246
// src/shims-vue.d.ts (Vue 3)  
247
/* eslint-disable */
248
declare module '*.vue' {
249
  import type { DefineComponent } from 'vue'
250
  const component: DefineComponent<{}, {}, any>
251
  export default component
252
}
253

254
// src/shims-tsx.d.ts (Vue 2 only)
255
import Vue, { VNode } from 'vue'
256

257
declare global {
258
  namespace JSX {
259
    interface Element extends VNode {}
260
    interface ElementClass extends Vue {}
261
    interface IntrinsicElements {
262
      [elem: string]: any
263
    }
264
  }
265
}
266
```
267

268
### Vue Version Detection
269

270
Automatic Vue version detection and configuration:
271

272
```javascript { .api }
273
/**
274
 * Vue version detection for template selection
275
 * @param rootOptions - Root project options
276
 * @returns boolean indicating if Vue 3 is being used
277
 */
278
const isVue3 = rootOptions && rootOptions.vueVersion === '3';
279
```
280

281
**Generation Process:**
282
1. Install TypeScript as dev dependency
283
2. Install class component dependencies (if enabled)
284
3. Integrate with existing plugins (if late invocation)
285
4. Render base templates with configuration options
286
5. Render Vue version-specific templates
287
6. Convert JavaScript files to TypeScript (via converter module)
288
7. Apply plugin execution order constraints