Manifest Module
Manifest adds Web App Manifest with no pain.
You can pass options to pwa.manifest in nuxt.config.js to override defaults. Check the
valid options available and and its
default options for deeper insights.
pwa: {
manifest: {
name: 'My Awesome App',
lang: 'fa',
useWebmanifestExtension: false
}
}
Default options
| Property | Type | Default | Description |
|---|---|---|---|
name *1 | String | package.json's name property | maximum of 45 characters |
short_name *1 | String | package.json's name property | maximum of 12 characters |
description *2 | String | package.json's description property | |
icons *1 | Array<Object> | [] | (See the icon module) |
start_url *1 | String | routerBase + '?standalone=true' | It has to be relative to where the manifest is placed |
display *1 | String | 'standalone' | |
background_color *2 | String | '#ffffff' | |
theme_color *2 | String | pwa.meta.theme_color | This module's meta theme-color (see the meta module) |
dir | String | 'ltr' | ltr or rtl. Used with lang |
lang | String | 'en' | Recommended if used dir |
useWebmanifestExtension *3 | Boolean | false | Whether to use webmanifest file extension (or default json) |
publicPath | String | A combination of routerBase and options.build.publicPath |
- *1 Mandatory (according to Google).
Although official documentation only mentions
nameandicons - *2 Recommended (according to Google)
- *3 Please see wiki
For more information, check out:
- the spec: https://w3c.github.io/manifest/
- Pete LePage's article: https://web.dev/add-manifest/
- MDN Docs: https://developer.mozilla.org/en-US/docs/Web/Manifest
Difference between name and short_name:
name
The name (maximum of 45 characters) is the primary identifier of the app and is a required field. It is displayed in the following locations:
- Install dialog
- Extension management UI
- Chrome Web Store
Source: https://developer.chrome.com/apps/manifest/name
short_name
The short_name (maximum of 12 characters recommended) is a short version of the app's name. It is an optional field and if not specified, the name will be used, > though it will likely be truncated. The short name is typically used where there is insufficient space to display the full name, such as:
- Device home screens
- New Tab page
Source: https://developer.chrome.com/apps/manifest/name
useWebmanifestExtension:
This options sets the manifest file extension to .json or .webmanifest. For more information, check
this wiki page.