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.

nuxt.config.js
pwa: {
  manifest: {
    name: 'My Awesome App',
    lang: 'fa',
    useWebmanifestExtension: false
  }
}

Default options

PropertyTypeDefaultDescription
name *1Stringpackage.json's name propertymaximum of 45 characters
short_name *1Stringpackage.json's name propertymaximum of 12 characters
description *2Stringpackage.json's description property
icons *1Array<Object>[](See the icon module)
start_url *1StringrouterBase + '?standalone=true'It has to be relative to where the manifest is placed
display *1String'standalone'
background_color *2String'#ffffff'
theme_color *2Stringthis.options.loading.colorNuxt loading color option
dirString'ltr'ltr or rtl. Used with lang
langString'en'Recommended if used dir
useWebmanifestExtension *3BooleanfalseWhether to use webmanifest file extension (or default json)
publicPathStringA combination of routerBase and options.build.publicPath

For more information, check out:

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.