Setup

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

Installation

Add @nuxtjs/pwa dependency to your project:

yarn add --dev @nuxtjs/pwa

npm i --save-dev @nuxtjs/pwa

Edit your nuxt.config.js file to add pwa module::

nuxt.config.js

{
  buildModules: [
    '@nuxtjs/pwa',
  ]
}

NOTE: If using ssr: false with production mode without nuxt generate, you have to use modules instead of buildModules

Add Icon

Ensure static dir exists and optionally create static/icon.png. (Recommended to be square png and >= 512x512px)

Ignore Service Worker

Create or add this to .gitignore:

.gitignore

sw.*

Configuration

PWA module is a collection of smaller modules that are designed to magically work out of the box together. To disable each sub-module, you can pass false option with its name as key. For example to disable icon module:

nuxt.config.js

{
  pwa: {
    icon: false // disables the icon module
  }
}

Also each sub-module has its own configuration. Continue reading docs for detailed info.