Nuxt 3 - Turn Your App into a PWA with @vite-pwa/nuxt
Tutorial on how to turn a Nuxt 3 app into a Progressive Web App (PWA) using @vite-pwa/nuxt.
Tags: Nuxt 3, 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 3 app already set up
Setting Up a Nuxt 3 App
If you donβt have a Nuxt 3 app yet, follow these steps to create one. Otherwise, skip to the next section.
npx nuxi init nuxt3-app
cd nuxt3-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 3 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 3 PWA',
short_name: 'NuxtPWA',
description: 'A Nuxt 3 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:
- Open the app in your browser.
- Simulate offline mode in Chrome DevTools by navigating to Network > Offline.
- 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 3 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!