0
# Plugin Configuration
1

2
Main Vue CLI plugin function that configures webpack with PWA capabilities including service worker generation, HTML meta tag injection, and development middleware setup.
3

4
## Capabilities
5

6
### Main Plugin Function
7

8
The primary export that Vue CLI uses to configure PWA functionality.
9

10
```javascript { .api }
11
/**
12
 * Main Vue CLI plugin function that configures PWA capabilities
13
 * @param {Object} api - Vue CLI plugin API providing webpack and dev server configuration
14
 * @param {Object} options - Plugin configuration options containing pwa settings
15
 */
16
function vuePwaPlugin(api, options);
17
```
18

19
**Usage Example:**
20

21
```javascript
22
// This function is automatically called by Vue CLI when the plugin is registered
23
// Configuration is provided through vue.config.js
24
module.exports = {
25
  pwa: {
26
    name: 'My PWA App',
27
    themeColor: '#4DBA87',
28
    workboxPluginMode: 'GenerateSW'
29
  }
30
}
31
```
32

33
### PWA Configuration Options
34

35
Complete configuration interface for PWA plugin settings.
36

37
```javascript { .api }
38
interface PWAOptions {
39
  /** Service worker generation mode: 'GenerateSW' (default) or 'InjectManifest' */
40
  workboxPluginMode?: 'GenerateSW' | 'InjectManifest';
41
  /** Options passed directly to Workbox webpack plugin */
42
  workboxOptions?: WorkboxOptions;
43
  /** App name used in meta tags and manifest (defaults to package.json name) */
44
  name?: string;
45
  /** Theme color for PWA (default: '#4DBA87') */
46
  themeColor?: string;
47
  /** Microsoft tile color (default: '#000000') */
48
  msTileColor?: string;
49
  /** Apple mobile web app capable setting (default: 'no') */
50
  appleMobileWebAppCapable?: string;
51
  /** Apple status bar style (default: 'default') */
52
  appleMobileWebAppStatusBarStyle?: string;
53
  /** Version string appended to asset URLs for cache busting (default: '') */
54
  assetsVersion?: string;
55
  /** Path to manifest file (default: 'manifest.json') */
56
  manifestPath?: string;
57
  /** Custom manifest.json content (default: {}) */
58
  manifestOptions?: ManifestOptions;
59
  /** Crossorigin attribute for manifest link (default: undefined) */
60
  manifestCrossorigin?: 'anonymous' | 'use-credentials';
61
  /** Custom paths for PWA icon files */
62
  iconPaths?: IconPaths;
63
}
64
```
65

66
### Workbox Configuration
67

68
Configuration options passed to the underlying Workbox webpack plugin.
69

70
```javascript { .api }
71
interface WorkboxOptions {
72
  /** Regex patterns for files to exclude from precaching */
73
  exclude?: RegExp[];
74
  /** Cache identifier for service worker (defaults to app name) */
75
  cacheId?: string;
76
  /** Path to existing service worker for InjectManifest mode */
77
  swSrc?: string;
78
  /** Whether service worker should skip waiting */
79
  skipWaiting?: boolean;
80
  /** Whether service worker should claim clients immediately */
81
  clientsClaim?: boolean;
82
  /** Additional Workbox plugin options */
83
  [key: string]: any;
84
}
85
```
86

87
### Default Workbox Options
88

89
Default configuration applied by the plugin.
90

91
```javascript { .api }
92
const defaultWorkboxOptions = {
93
  exclude: [
94
    /\.map$/,
95
    /img\/icons\//,
96
    /favicon\.ico$/,
97
    /^manifest.*\.js?$/
98
  ]
99
};
100

101
const defaultGenerateSWOptions = {
102
  cacheId: 'app-name' // Uses actual app name from package.json
103
};
104
```
105

106
**Usage Example:**
107

108
```javascript
109
// vue.config.js
110
module.exports = {
111
  pwa: {
112
    workboxPluginMode: 'InjectManifest',
113
    workboxOptions: {
114
      swSrc: 'src/service-worker.js',
115
      exclude: [/\.map$/, /manifest$/, /\.htaccess$/],
116
      skipWaiting: true,
117
      clientsClaim: true,
118
      runtimeCaching: [{
119
        urlPattern: /^https:\/\/api\.example\.com\//,
120
        handler: 'NetworkFirst',
121
        options: {
122
          cacheName: 'api-cache',
123
          networkTimeoutSeconds: 3
124
        }
125
      }]
126
    }
127
  }
128
}
129
```
130

131
### Webpack Integration
132

133
The plugin integrates with webpack through chainable configuration.
134

135
```javascript { .api }
136
/**
137
 * Webpack chain configuration applied by the plugin
138
 * @param {ChainableConfig} webpackConfig - Webpack chain configuration
139
 */
140
api.chainWebpack(webpackConfig => {
141
  // Adds HtmlPwaPlugin after html-webpack-plugin
142
  webpackConfig
143
    .plugin('pwa')
144
    .use(HtmlPwaPlugin, [userOptions])
145
    .after('html');
146

147
  // In production, adds Workbox plugin
148
  if (process.env.NODE_ENV === 'production') {
149
    webpackConfig
150
      .plugin('workbox')
151
      .use(WorkboxPlugin, [workboxConfig]);
152
  }
153
});
154
```
155

156
### Development Server Configuration
157

158
The plugin configures development server middleware for service worker handling.
159

160
```javascript { .api }
161
/**
162
 * Development server configuration applied by the plugin
163
 * @param {Express} app - Express application instance
164
 */
165
api.configureDevServer(app => {
166
  app.use(createNoopServiceWorkerMiddleware());
167
});
168

169
// Webpack chain configuration type
170
interface ChainableConfig {
171
  plugin(name: string): {
172
    use(plugin: any, options?: any[]): {
173
      after(name: string): ChainableConfig;
174
    };
175
  };
176
}
177
```