Skip to content

danielroe/nuxt-pwa-module

 
 

Repository files navigation

Nuxt 3 PWA

npm version npm downloads Github Actions Codecov

Zero config PWA solution for Nuxt 3

image

State of official module

This module is unofficial but aims to become the next iteration of the official Nuxt PWA module.

Setup

Add @kevinmarrec/nuxt-pwa dependency to your project :

# Using Yarn
yarn add -D @kevinmarrec/nuxt-pwa
# Using NPM
npm install -D @kevinmarrec/nuxt-pwa
# Using PNPM
pnpm install -D @kevinmarrec/nuxt-pwa

Edit your nuxt.config.ts file to add PWA module :

export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa'
  ]
})

Configuration

As this module tries to be compliant with Nuxt 2 PWA for easy migration, you can still use https://pwa.nuxtjs.org documentation for most features.

If you want your app to be installable in development, you need to set pwa.workbox.enabled option to true in your nuxt.config, as it's only enabled for production by default :

export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa'
  ],
  pwa: {
    workbox: {
      enabled: true
    }
  }
})

If you need custom workbox service worker, you can specify path to your worker with pwa.workbox.templatePath option, you can use path aliases like ~ and @.

export default defineNuxtConfig({
  modules: [
    '@kevinmarrec/nuxt-pwa'
  ],
  pwa: {
    workbox: {
      templatePath: '~/path/to/your/worker.js'
    }
  }
})

To customize it, you can check the default of this module here, as well as Nuxt 2 default and Workbox Documentation.

⚠️ Missing features ⚠️

Compared to Nuxt 2 PWA, this module is - as for now - missing the following features:

  • Workbox extra options (enabled, workboxUrl, workboxVersion only supported)
  • OneSignal support

Development

Make sure to install the dependencies :

pnpm install

Start the development server on http://localhost:3000 :

pnpm dev

Example

Build & start example on http://localhost:3000 :

pnpm example:build
pnpm example:start

License

Made with ❤️

Published under the MIT License.

About

Zero config PWA solution for Nuxt 3

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project

 

Packages

No packages published

Languages

  • TypeScript 85.6%
  • JavaScript 13.2%
  • Vue 1.2%