Turn a Nuxt 3 app into an installable PWA (2026)

Key takeaways

• @vite-pwa/nuxt generates the manifest and service worker for you.
• Register-type = autoUpdate keeps the worker in sync without user prompts.
• Nuxt does not solve iOS install — use InstantPWA or write a share-sheet card yourself.

Before you start

• Nuxt 3.6+
• @vite-pwa/nuxt
• HTTPS origin

manifest.webmanifest

{
  "name": "Your product",
  "short_name": "Product",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#111827",
  "icons": [
    { "src": "/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icon-512.png", "sizes": "512x512", "type": "image/png", "purpose": "any maskable" }
  ]
}

Step-by-step for Nuxt

1. Step 1
   Install the module

   Run `pnpm add -D @vite-pwa/nuxt` and add it to modules in nuxt.config.ts.

2. Step 2
   Configure the manifest

   All PWA config lives under the `pwa` key in nuxt.config.ts. The module writes manifest.webmanifest and sw.js at build time.

   export default defineNuxtConfig({
     modules: ['@vite-pwa/nuxt'],
     pwa: {
       registerType: 'autoUpdate',
       manifest: { name: 'Your product', short_name: 'Product', theme_color: '#111827' },
     },
   });

3. Step 3
   Add the install popup

   Drop InstantPWA into app.vue for iOS + Chromium install UI.

   <script src="https://instantpwa.com/api/public/embed.js?id=YOUR_ID" async></script>

Minimal sw.js

// public/sw.js
self.addEventListener('install', (e) => self.skipWaiting());
self.addEventListener('activate', (e) => self.clients.claim());
self.addEventListener('fetch', () => {});

Common Nuxt gotchas

• In dev, set devOptions.enabled = true or the worker never registers.
• The module places sw.js at /sw.js — do not put a second service worker in /public or scopes will conflict.

FAQ