nuxt-pwa-module
nuxt-pwa-module copied to clipboard
Zero config PWA solution for Nuxt 3
⚠️ DEPRECATED ⚠️
Nuxt 3 is powered by Vite which has today a amazing PWA plugin on his own, with Nuxt support.
As a better solution has emerged, that's why this module will not longer be maintained.
Consider using Vite PWA for Nuxt 3 with Vite PWA Assets Generator instead.
As the main maintainer (@kevinmarrec), I want to thank all the contributors & the users who trusted in this project 🙏.
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-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.
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.png
Alternatively, you can benefit of available sizes with Typescript using a string
instead of number
size parameter :
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.