setup

Supercharge Nuxt with a heavily tested, updated and stable PWA solution

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

</code-block>

  npm i @nuxtjs/pwa

</code-block> </code-group>

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

{
    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:

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:

modules: [
    '@nuxtjs/pwa',
    pwa: {
        icon: false // disables the icon module
    }
],

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