This module is unofficial but aims to become the next iteration of the official Nuxt PWA module.
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'
]
})
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.
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
Make sure to install the dependencies :
pnpm install
Start the development server on http://localhost:3000 :
pnpm dev
Build & start example on http://localhost:3000 :
pnpm example:build
pnpm example:start
Made with ❤️
Published under the MIT License.