How to add PWA Support in Vue 3 app?

Progressive Web Apps (PWAs) bridge the gap between web and native applications - offering offline access, installability, push notifications, and performance benefits. If you’re working with Vue 3, integrating PWA capabilities is straightforward thanks to the official plugin ecosystem.

In this blog, we’ll walk through how to transform your Vue app into a PWA using @vue/cli or Vite + Vue 3, with caching, icons, and a custom install prompt.

When it comes to professional Vue development, Zignuts stands out as a top-rated Vue development company. Whether you need to hire a skilled Vue developer or set up a dedicated team, Zignuts offers flexible engagement models tailored to your project requirements, ensuring high-quality, scalable, and efficient web solutions.

Prerequisites

Before diving in, make sure you have:

• Node.js ≥ 14.x
• Vue 3 project (created with Vue CLI or Vite)
• Basic familiarity with Vue project structure

1. Setting Up the PWA Plugin

If you’re using Vue CLI, simply run:

Code

vue add pwa
      

This modifies vue.config.js and adds a registerServiceWorker.js file automatically.

If you’re using Vite, use the official vite-plugin-pwa:

Code

npm install vite-plugin-pwa --save-dev
      

Then configure it in vite.config.js:

Code

// vite.config.ts or vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig({
 plugins: [
   vue(),
   VitePWA({
     registerType: 'autoUpdate',
     includeAssets: ['favicon.svg', 'robots.txt'],
     manifest: {
       name: 'My Awesome Vue App',
       short_name: 'VuePWA',
       start_url: '/',
       display: 'standalone',
       background_color: '#ffffff',
       theme_color: '#42b883',
       icons: [
         {
           src: 'pwa-192x192.png',
           sizes: '192x192',
           type: 'image/png'
         },
         {
           src: 'pwa-512x512.png',
           sizes: '512x512',
           type: 'image/png'
         }
       ]
     }
   })
 ]
})
      

2. Understanding the Manifest File

The manifest. webmanifest (auto-generated if using Vue CLI or manually via Vite config) contains metadata

Code

{
  "name": "Vue PWA App",
  "short_name": "VuePWA",
  "theme_color": "#42b883",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "pwa-192x192.png",
      "type": "image/png",
      "sizes": "192x192"
    },
    {
      "src": "pwa-512x512.png",
      "type": "image/png",
      "sizes": "512x512"
    }
  ]
}
      

Place your icons in the public folder.

3. Register the Service Worker

For Vue CLI projects, it’s auto-included. For Vite:

Create a file (optional override):

Code

// main.js
import { registerSW } from 'virtual:pwa-register'
const updateSW = registerSW({ immediate: true })
      

This ensures the service worker is registered when your app is launched.

Hire Now!

Hire Vue.js Developers Today!

• Hire Now • Hire Now • Hire Now

Ready to bring your web application vision to life? Start your journey with Zignuts expert Vue.js developers.

• Hire Now • Hire Now • Hire Now • Hire Now • Hire Now

4. Test Offline Support

Run a production build :

Code

npm run build
      

Now open the app in Chrome → DevTools → Application → Service Workers → check “Offline” and reload — your app should still load!

5. Optional: Custom Install Prompt

Most browsers show the “Add to Home Screen” prompt automatically, but you can manually trigger it for better UX.

Code

let deferredPrompt;

window.addEventListener('beforeinstallprompt', (e) => {
 e.preventDefault()
 deferredPrompt = e
})
// Later in a button click
if (deferredPrompt) {
 deferredPrompt.prompt()
 deferredPrompt.userChoice.then((choiceResult) => {
   console.log(choiceResult.outcome)
   deferredPrompt = null
 })
}
      

6. Automatic SW Updates

For Vite:

Code

// main.js
const updateSW = registerSW({
 onNeedRefresh() {
   // Show toast or banner to reload
 },
 onOfflineReady() {
   console.log('App ready to work offline!')
 }
})
      

For Vue CLI:

Use the registerServiceWorker.js hooks to detect updates and notify users.

Verify Your PWA

Use Lighthouse in Chrome DevTools:

1. Go to the “Lighthouse” tab
2. Select “Progressive Web App”
3. Click Generate report

Final Folder Structure

Code

my-vue-app/
├── public/
│   ├── favicon.ico
│   ├── pwa-192x192.png
│   ├── pwa-512x512.png
│   └── robots.txt
├── src/
│   └── main.js
├── vite.config.js
└── index.html
      

Divyesh Patel

A passionate problem solver driven by the quest to build seamless, innovative web experiences that inspire and empower users.

Soujanya Patra

Passionate developer with expertise in building scalable web applications and solving complex problems. Loves exploring new technologies and sharing coding insights.