Vite PWA

Zero-config PWA Plugin for Nuxt

Installation

npm i @vite-pwa/nuxt -D

Setup

Add the following lines to the modules section of nuxt.config.{ts,js}

modules: ['@vite-pwa/nuxt']
pwa: {
  registerType: 'autoUpdate',
  manifest: {
    name: 'Project Name',
    short_name: 'Project Name',
    icons: [
      {
        src: '/images/pwa/192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'any'
      },
      {
        src: '/images/pwa/512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'any'
      },
      {
        src: '/images/pwa/maskable-192x192.png',
        sizes: '192x192',
        type: 'image/png',
        purpose: 'maskable'
      },
      {
        src: '/images/pwa/maskable-512x512.png',
        sizes: '512x512',
        type: 'image/png',
        purpose: 'maskable'
      }
    ],
    start_url: '/',
    display: 'fullscreen',
    background_color: '#020420',
    theme_color: '#00DC82',
    lang:'en',
    description: 'Description',
  },
  includeAssets: [
    '/images/pwa/favicon.ico',
    '/images/pwa/apple-touch-icon.png',
    '/images/pwa/mask-icon.svg',
  ],
  workbox: {
    navigateFallback: '/',
  },
  devOptions: {
    enabled: true,
  },
}

Add the following component to the app.vue file

app.vue

<template>
  <NuxtPwaManifest />
</template>

Make sure the icons are in the public directory & the src values are correct in the manifest. That's it your project is now installable!