0
# Project Generation
1

2
Vue CLI generator function that sets up PWA files, dependencies, and templates during plugin installation. Handles project modification, file injection, and TypeScript conversion when needed.
3

4
## Capabilities
5

6
### Generator Function
7

8
Main generator function called during Vue CLI plugin installation.
9

10
```javascript { .api }
11
/**
12
 * Vue CLI generator function for PWA plugin installation
13
 * @param {GeneratorAPI} api - Vue CLI generator API for project modification
14
 */
15
function pwaGenerator(api: GeneratorAPI): void;
16
```
17

18
**Usage Example:**
19

20
```bash
21
# Adds PWA plugin to existing Vue project
22
vue add pwa
23

24
# The generator function runs automatically and:
25
# 1. Adds register-service-worker dependency
26
# 2. Injects service worker import into main entry file
27
# 3. Renders PWA template files
28
# 4. Converts files to TypeScript if TypeScript plugin is present
29
```
30

31
### Package Dependencies
32

33
The generator adds required dependencies to the project.
34

35
```javascript { .api }
36
/**
37
 * Dependencies added by the PWA generator
38
 */
39
const pwaDependencies = {
40
  dependencies: {
41
    'register-service-worker': '^1.7.2'
42
  }
43
};
44

45
// Applied via api.extendPackage()
46
api.extendPackage(pwaDependencies);
47
```
48

49
### Service Worker Import Injection
50

51
Automatically injects service worker registration import into the main entry file.
52

53
```javascript { .api }
54
/**
55
 * Injects service worker import into main entry file
56
 * @param {string} entryFile - Main entry file path (main.js or main.ts)
57
 */
58
api.injectImports(api.entryFile, `import './registerServiceWorker'`);
59

60
// Results in the following import being added:
61
// import './registerServiceWorker'
62
```
63

64
### Template File Rendering
65

66
Renders PWA template files into the project structure.
67

68
```javascript { .api }
69
/**
70
 * Renders template files from generator/template directory
71
 * Template files include:
72
 * - src/registerServiceWorker.js
73
 * - public/img/icons/* (various PWA icons)
74
 * - public/manifest.json (if not already present)
75
 */
76
api.render('./template');
77
```
78

79
### Template Directory Structure
80

81
The plugin includes template files that are copied to the project:
82

83
```javascript { .api }
84
// Template files structure
85
generator/template/
86
├── src/
87
│   └── registerServiceWorker.js    // Service worker registration script
88
└── public/
89
    ├── img/icons/
90
    │   ├── android-chrome-192x192.png
91
    │   ├── android-chrome-512x512.png
92
    │   ├── android-chrome-maskable-192x192.png
93
    │   ├── android-chrome-maskable-512x512.png
94
    │   ├── apple-touch-icon-152x152.png
95
    │   ├── favicon-16x16.png
96
    │   ├── favicon-32x32.png
97
    │   ├── favicon.svg
98
    │   ├── msapplication-icon-144x144.png
99
    │   └── safari-pinned-tab.svg
100
    └── manifest.json                // PWA manifest file
101
```
102

103
### Service Worker Registration Template
104

105
The template service worker registration script that gets added to projects.
106

107
```javascript { .api }
108
// src/registerServiceWorker.js template content
109
import { register } from 'register-service-worker';
110

111
if (process.env.NODE_ENV === 'production') {
112
  register(`${process.env.BASE_URL}service-worker.js`, {
113
    ready() {
114
      console.log(
115
        'App is being served from cache by a service worker.\n' +
116
        'For more details, visit https://goo.gl/AFskqB'
117
      );
118
    },
119
    registered() {
120
      console.log('Service worker has been registered.');
121
    },
122
    cached() {
123
      console.log('Content has been cached for offline use.');
124
    },
125
    updatefound() {
126
      console.log('New content is downloading.');
127
    },
128
    updated() {
129
      console.log('New content is available; please refresh.');
130
    },
131
    offline() {
132
      console.log('No internet connection found. App is running in offline mode.');
133
    },
134
    error(error) {
135
      console.error('Error during service worker registration:', error);
136
    }
137
  });
138
}
139
```
140

141
### TypeScript Integration
142

143
Automatic TypeScript conversion when TypeScript plugin is detected.
144

145
```javascript { .api }
146
/**
147
 * TypeScript file conversion during PWA plugin installation
148
 * Converts generated .js files to .ts when @vue/cli-plugin-typescript is present
149
 */
150
if (api.invoking && api.hasPlugin('typescript')) {
151
  const convertFiles = require('@vue/cli-plugin-typescript/generator/convert');
152
  convertFiles(api);
153
}
154

155
// Converts:
156
// src/registerServiceWorker.js → src/registerServiceWorker.ts  
157
// src/main.js → src/main.ts (if needed)
158
```
159

160
### Generator API Interface
161

162
Vue CLI Generator API methods used by the PWA generator.
163

164
```javascript { .api }
165
interface GeneratorAPI {
166
  /** Extends package.json with additional dependencies and configuration */
167
  extendPackage(packageChanges: object): void;
168
  
169
  /** Injects import statements into specified file */
170
  injectImports(file: string, imports: string): void;
171
  
172
  /** Renders template files from generator template directory */
173
  render(templatePath: string): void;
174
  
175
  /** Main entry file path (e.g., 'src/main.js') */
176
  entryFile: string;
177
  
178
  /** Whether generator is being invoked (vs. during create) */
179
  invoking: boolean;
180
  
181
  /** Checks if specific plugin is present in project */
182
  hasPlugin(pluginName: string): boolean;
183
}
184
```
185

186
### Installation Process
187

188
Complete flow when adding PWA plugin to a project:
189

190
```javascript { .api }
191
/**
192
 * PWA Plugin Installation Process
193
 * 1. User runs: vue add pwa
194
 * 2. Vue CLI downloads @vue/cli-plugin-pwa
195
 * 3. Runs generator/index.js with project API
196
 * 4. Generator performs these actions:
197
 */
198

199
// Step 1: Add register-service-worker dependency
200
api.extendPackage({
201
  dependencies: {
202
    'register-service-worker': '^1.7.2'
203
  }
204
});
205

206
// Step 2: Inject service worker import
207
api.injectImports(api.entryFile, `import './registerServiceWorker'`);
208

209
// Step 3: Copy template files to project
210
api.render('./template');
211

212
// Step 4: Convert to TypeScript if needed
213
if (api.invoking && api.hasPlugin('typescript')) {
214
  const convertFiles = require('@vue/cli-plugin-typescript/generator/convert');
215
  convertFiles(api);
216
}
217
```
218

219
### Generated File Examples
220

221
Examples of files created by the generator:
222

223
```javascript { .api }
224
// src/main.js (after generator runs)
225
import { createApp } from 'vue'
226
import App from './App.vue'
227
import './registerServiceWorker'  // <- Added by generator
228

229
createApp(App).mount('#app')
230
```
231

232
```json
233
// public/manifest.json (template file)
234
{
235
  "name": "My PWA App",
236
  "short_name": "PWA",
237
  "theme_color": "#4DBA87",
238
  "icons": [
239
    {
240
      "src": "./img/icons/android-chrome-192x192.png",
241
      "sizes": "192x192",
242
      "type": "image/png"
243
    }
244
  ],
245
  "start_url": ".",
246
  "display": "standalone",
247
  "background_color": "#000000"
248
}
249
```
250

251
```javascript
252
// package.json (after generator runs)
253
{
254
  "dependencies": {
255
    "register-service-worker": "^1.7.2"  // <- Added by generator
256
  }
257
}
258
```