Zero-config PWA Plugin for Nuxt 3

• ?? Documentation & guides
• ?? Zero-Config : sensible built-in default configs for common use cases
• ?? Extensible : expose the full ability to customize the behavior of the plugin
• ?? Type Strong : written in TypeScript
• ?? Offline Support : generate service worker with offline support (via Workbox)
• ? Fully tree shakable : auto inject Web App Manifest
• ?? Prompt for new content : built-in support for Vanilla JavaScript, Vue 3, React, Svelte, SolidJS and Preact
• ?? Stale-while-revalidate : automatic reload when new content is available
• ? Static assets handling : configure static assets for offline support
• ?? Development Support : debug your custom service worker logic as you develop your application
• ??? Versatile : integration with meta frameworks: iles , SvelteKit , VitePress , Astro , Nuxt 3 and Remix
• ?? PWA Assets Generator : generate all the PWA assets from a single command and a single source image
• ?? PWA Assets Integration : serving, generating and injecting PWA Assets on the fly in your application

From v0.4.0, @vite-pwa/nuxt requires Vite 5 and Nuxt 3.9.0+.

For older versions, @vite-pwa/nuxt requires Vite 3.2.0+ and Nuxt 3.0.0+.

npx nuxi@latest module add @vite-pwa/nuxt

Add @vite-pwa/nuxt module to nuxt.config.ts and configure it:

// nuxt.config.ts

import
 {
 defineNuxtConfig
 }
 from
 'nuxt/config'


export
 default
 defineNuxtConfig
(
{

  modules
: 
[

    '@vite-pwa/nuxt'

  ]
,

  pwa
: 
{

    /* PWA options */

  }

}
)

Read the ?? documentation for a complete guide on how to configure and use this plugin.

You need to stop the dev server once started and then to see the PWA in action run:

• nr dev:preview:build : Nuxt build command + start server
• nr dev:preview:generate : Nuxt generate command + start server

Example	Source	Playground
Auto Update PWA	GitHub

Check out the type declaration src/types.ts and the following links for more details.

• Web app manifests
• Workbox

MIT License ⓒ 2023-PRESENT Anthony Fu