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 @nuxtjs/pwa
npm i @nuxtjs/pwa

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

nuxt.config.js
{
    modules: [
        '@nuxtjs/pwa',
    ],
}

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
modules: [
    '@nuxtjs/pwa',
    pwa: {
        icon: false // disables the icon module
    }
],

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