kevinmarrec
Nuxt 3 PWA
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-pwaEdit 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.
Composables
usePWAIcon (size, options)
You can use usePWAIcon to get icons urls of your PWA, and use it in your app.
const icon = usePWAIcon(512) // /assets/icons/512x512.png
const icon = usePWAIcon(512, { maskable: true }) // /assets/icons/512x512.maskable.pngAlternatively, you can benefit of available sizes with Typescript using a string instead of number size parameter :
Development
Make sure to install the dependencies :
pnpm installStart the development server on http://localhost:3000 :
pnpm devExample
Build & start example on http://localhost:3000 :
pnpm example:build
pnpm example:startLicense
Made with ❤️
Published under the MIT License.