Nuxt 4 - Turn Your App into a PWA with @vite-pwa/nuxt

Tutorial on how to turn a Nuxt 4 app into a Progressive Web App (PWA) using @vite-pwa/nuxt.

Tags: Nuxt 4, PWA, @vite-pwa/nuxt

Time to read: 7 min

Prerequisites

• Familiarity with the command line
• Install Node.js version 16.0 or higher
• A Nuxt 4 app already set up

Setting Up a Nuxt 4 App

If you don’t have a Nuxt 4 app yet, follow these steps to create one. Otherwise, skip to the next section.

npx nuxi init nuxt4-app
cd nuxt4-app
npm install

Run the development server to verify the app works:

npm run dev

View the app at http://localhost:3000/.

Installing @vite-pwa/nuxt

To transform your Nuxt 4 app into a PWA, you’ll need the @vite-pwa/nuxt module. This module provides everything you need to make your app installable and offline-ready.

Run the following command to install it:

npm install @vite-pwa/nuxt

Configuring @vite-pwa/nuxt

Now, add the @vite-pwa/nuxt module to your Nuxt config. Open nuxt.config.ts and update it as follows:

export default defineNuxtConfig({
  modules: [
    '@vite-pwa/nuxt',
  ],
  pwa: {
    registerType: 'autoUpdate',
    manifest: {
      name: 'Nuxt 4 PWA',
      short_name: 'NuxtPWA',
      description: 'A Nuxt 4 Progressive Web App',
      theme_color: '#4A90E2',
      icons: [
        {
          src: '/pwa-icon-192x192.png',
          sizes: '192x192',
          type: 'image/png',
        },
        {
          src: '/pwa-icon-512x512.png',
          sizes: '512x512',
          type: 'image/png',
        },
      ],
    },
    workbox: {
      runtimeCaching: [
        {
          urlPattern: 'https://example.com/.*',
          handler: 'NetworkFirst',
          options: {
            cacheName: 'api-cache',
            expiration: {
              maxEntries: 50,
              maxAgeSeconds: 86400,
            },
          },
        },
      ],
    },
  },
});

Key Configuration Options:

• registerType: 'autoUpdate': Ensures the service worker updates automatically.
• Manifest: Defines your app’s metadata, including its name, description, and icons.
• Workbox Options: Customizes caching behavior for network resources.

Adding Icons for Your PWA

Create the required PWA icons and place them in the public/ directory:

• public/pwa-icon-192x192.png
• public/pwa-icon-512x512.png

You can use a tool like RealFaviconGenerator to generate these icons.

Verifying the PWA Configuration

Run the app in development mode:

npm run dev

Then build and preview your app to test the PWA functionality:

npm run build
npm run preview

Open the app in a browser and check the Application tab in Chrome DevTools to ensure:

• The manifest is detected.
• The service worker is registered.
• The app can be installed as a PWA.

Testing Offline Capability

To test offline support, follow these steps:

1. Open the app in your browser.
2. Simulate offline mode in Chrome DevTools by navigating to Network > Offline.
3. Refresh the page to confirm the app works offline.

Customizing the Service Worker

To further customize the service worker, update the workbox options in nuxt.config.ts. For example, you can add specific caching strategies for images, fonts, or API responses.

workbox: {
  runtimeCaching: [
    {
      urlPattern: /\.(?:png|jpg|jpeg|svg|gif)$/,
      handler: 'CacheFirst',
      options: {
        cacheName: 'image-cache',
        expiration: {
          maxEntries: 100,
          maxAgeSeconds: 7 * 24 * 60 * 60, // 1 week
        },
      },
    },
  ]
}

Conclusion

Congratulations! You’ve successfully turned your Nuxt 4 app into a PWA using @vite-pwa/nuxt. Your app is now installable, offline-ready, and ready to deliver a better user experience.

Enjoy building your Nuxt-powered PWA!