How to turn your Nuxt GeoApplication into a PWA

Welcome to this guide where we’ll learn how to turn our Nuxt Geoapplication into a Progressive Web App (PWA). PWAs act like apps, work even without an internet connection, and can be installed just like regular apps on different devices. We’ll also show you a quick and easy way to create all the necessary icons using the ‘vite-pwa/assets-generator.’ Simply add it to your home screen, and you’ll see how amazing it can be.

Prerequisites:

Before we get started, be sure to check out our latest post: How to use Vuetify, Mapbox, and DeckGL with Nuxt 3.

Follow these steps:

Step 1: Install the npm packages

In this step, we’ll install the necessary npm packages, including @vite-pwa/nuxt and @vite-pwa/assets-generator, which will help us set up our PWA. These packages are essential for adding Progressive Web App capabilities to our Nuxt application.

npm install -D @vite-pwa/nuxt @vite-pwa/assets-generator

Step 2: Configure PWA module

Now, let’s configure the PWA module in the nuxt.config.js, you can replace the existing content with the following code:

const appName = 'Geoglify'
const appDescription = "You're in the right place"

export default defineNuxtConfig({
  modules: ['@vite-pwa/nuxt'],
  ssr: false,
  pwa: {
    scope: '/',
    base: '/',
    injectRegister: 'auto',
    registerType: 'autoUpdate',
    manifest: {
      name: appName,
      short_name: appName,
      description: appDescription,
      theme_color: "#1867c0",
      background_color: "#1867c0",
      icons: [
        {
          src: 'pwa-64x64.png',
          sizes: '64x64',
          type: 'image/png'
        },
        {
          src: 'pwa-192x192.png',
          sizes: '192x192',
          type: 'image/png'
        },
        {
          src: 'pwa-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'any'
        },
        {
          src: 'maskable-icon-512x512.png',
          sizes: '512x512',
          type: 'image/png',
          purpose: 'maskable'
        }
      ]
    },
    registerWebManifestInRouteRules: true,
    workbox: {
      navigateFallback: undefined,
      cleanupOutdatedCaches: true,
      globPatterns: ['**/*.{json,ico,svg,ttf,woff,css,scss,js,html,txt,jpg,png,woff2,mjs,otf,ani}'],
      runtimeCaching: [
        {
          urlPattern: "/",
          handler: 'NetworkFirst',
        },
        {
          urlPattern: /^https:\/\/api\.mapbox\.com\/.*/i,
          handler: "CacheFirst",
          options: {
            cacheName: "mapbox-cache",
            cacheableResponse: {
              statuses: [0, 200],
            },
          },
        },
      ],
    },
    client: {
      installPrompt: false,
      periodicSyncForUpdates: 20, //seconds
    },
    devOptions: {
      enabled: true,
      suppressWarnings: false,
      navigateFallback: 'index.html',
      type: 'module',
    },
  },
  devtools: { enabled: false },
  css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify'],
  },
  runtimeConfig: {
    public: {
      MAPBOX_TOKEN: process.env.MAPBOX_TOKEN,
    },
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

Step 3: Add VitePwaManifest in app.vue

Now, you need to include the component in your app.vue file. This component is essential for configuring the Progressive Web App (PWA) behavior within your Nuxt application.

<template>
  <VitePwaManifest />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<style>
html,
body {
  overflow: hidden !important;
}
</style>

Step 4: Generate PWA assets

To generate all the PWA assets with a single command, create a pwa-assets.config.js file in the root of your project folder. Populate the file with the following code:

import { defineConfig, minimalPreset as preset } from '@vite-pwa/assets-generator/config'

export default defineConfig({
  preset,
  images: [
    'public/logo.png',
  ]
})

Next, add the following script to your package.json:

{
  "scripts": {
    ...
    "generate-pwa-assets": "pwa-assets-generator",
    ...
  }
}

Then, to generate all the PWA assets, run the following command:

npm run generate-pwa-assets

With this step, you generated all the icons required for your PWA application in the your ‘public’ folder.

Step 5: Launch Your Nuxt GeoApplication

Now you can launch your Nuxt GeoApplication:

npm run dev

Open http://localhost:3000 in your browser, and you should see your installable Nuxt PWA with Vuetify, Mapbox, and DeckGL integrated:

Code Availability: You can find the code on GitHub.

Live Demo: You can test a live demo app.geoglify.com.