dbef5e9fed
BREAKING CHANGES:
- The configuration API has changed.
- The `files` options now accept an object of different config files:
```js
api.describeConfig({
/* ... */
// All possible files for this config
files: {
// eslintrc.js
eslint: {
js: ['.eslintrc.js'],
json: ['.eslintrc', '.eslintrc.json'],
// Will read from `package.json`
package: 'eslintConfig'
},
// vue.config.js
vue: {
js: ['vue.config.js']
}
},
})
```
- The `onWrite` api has changed: `setData` and `assignData` have now `fileId` as the first argument:
```js
api.describeConfig({
onWrite: async ({ api, prompts }) => {
const eslintData = {}
const vueData = {}
for (const prompt of prompts) {
// eslintrc
if (prompt.id.indexOf('vue/') === 0) {
eslintData[`rules.${prompt.id}`] = await api.getAnswer(prompt.id, JSON.parse)
} else {
// vue.config.js
vueData[prompt.id] = await api.getAnswer(prompt.id)
}
}
api.setData('eslint', eslintData)
api.setData('vue', vueData)
}
})
```
Other changes
- Config tabs (optional):
```js
api.describeConfig({
/* ... */
onRead: ({ data, cwd }) => ({
tabs: [
{
id: 'tab1',
label: 'My tab',
// Optional
icon: 'application_settings',
prompts: [
// Prompt objects
]
},
{
id: 'tab2',
label: 'My other tab',
prompts: [
// Prompt objects
]
}
]
})
})
```
@vue/cli-plugin-pwa
pwa plugin for vue-cli
Configuration
Configuration is handled via the pwa property of either the vue.config.js
file, or the "vue" field in package.json.
-
pwa.workboxPluginMode
This allows you to the choose between the two modes supported by the underlying
workbox-webpack-plugin.-
'GenerateSW'(default), will lead to a new service worker file being created each time you rebuild your web app. -
'InjectManifest'allows you to start with an existing service worker file, and creates a copy of that file with a "precache manifest" injected into it.
The "Which Plugin to Use?" guide can help you choose between the two modes.
-
-
pwa.workboxOptions
These options are passed on through to the underlying
workbox-webpack-plugin.For more information on what values are supported, please see the guide for
GenerateSWor forInjectManifest. -
pwa.name
-
Default: "name" field in
package.jsonUsed as the value for the
apple-mobile-web-app-titlemeta tag in the generated HTML. Note you will need to editpublic/manifest.jsonto match this.
-
-
pwa.themeColor
- Default:
'#4DBA87'
- Default:
-
pwa.msTileColor
- Default:
'#000000'
- Default:
-
pwa.appleMobileWebAppCapable
-
Default:
'no'This defaults to
'no'because iOS before 11.3 does not have proper PWA support. See this article for more details.
-
-
pwa.appleMobileWebAppStatusBarStyle
- Default:
'default'
- Default:
Example Configuration
// Inside vue.config.js
module.exports = {
// ...other vue-cli plugin options...
pwa: {
name: 'My App',
themeColor: '#4DBA87',
msTileColor: '#000000',
appleMobileWebAppCapable: 'yes',
appleMobileWebAppStatusBarStyle: 'black',
// configure the workbox plugin
workboxPluginMode: 'InjectManifest',
workboxOptions: {
// swSrc is required in InjectManifest mode.
swSrc: 'dev/sw.js',
// ...other Workbox options...
}
}
}
Installing in an Already Created Project
vue add @vue/pwa
Injected webpack-chain Rules
config.plugin('workbox')