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

Key takeaways

• Vite + vite-plugin-pwa is the modern default.
• The Vue CLI PWA plugin still works for legacy projects.
• Use a hosted install popup to avoid managing prompt state in Pinia.

Before you start

• Vue 3
• Vite or Vue CLI
• 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 Vue

1. Step 1
   Add vite-plugin-pwa

   For Vite: install and add to plugins.

2. Step 2
   Configure the manifest

   Pass the manifest inline. The plugin writes it at build time.

3. Step 3
   Add the install popup

   Drop the InstantPWA script into index.html.

Minimal sw.js

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

Common Vue gotchas

• If you use Vue Router with history mode, make sure your host serves index.html for unknown routes — otherwise the installed app 404s on deep links.

FAQ