feat(pwa): enable the PWA capability

Makefile

@@ -8,6 +8,16 @@ build:
 dev:
 	docker compose up -d
 
+stop:
+	docker compose stop
+
+restart:
+	docker compose restart
+
+# Exec into the development environment
+exec:
+	docker compose exec nuxt /bin/bash
+
 # View logs for the development environment
 logs:
 	docker compose logs -f

app/app.vue

@@ -1,10 +1,13 @@
 <template>
   <UContainer>
+    <VitePwaManifest />
     <UCard class="mt-10">
       <template #header>
         <div class="flex justify-between">
           <h1>Welcome to Nuxt UI Starter</h1>
-          <ColorScheme><USelect v-model="$colorMode.preference" :options="['system', 'light', 'dark']" /></ColorScheme>
+          <ColorScheme>
+            <USelect v-model="$colorMode.preference" :options="['system', 'light', 'dark']" />
+          </ColorScheme>
         </div>
       </template>
       <UButton icon="i-heroicons-book-open" to="https://ui.nuxt.com" target="_blank">Open Nuxt UI Documentation</UButton>

app/nuxt.config.ts

@@ -1,5 +1,44 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxt/ui"]
+  modules: ["@nuxt/ui", "@vite-pwa/nuxt"],
+  pwa: {
+    manifest: {
+      name: 'Boat Sharing',
+      short_name: 'Boat',
+      description: 'An app for sharing a boat among a pre-defined set of users.',
+      lang: 'en',
+      display: 'standalone',
+      start_url: '/',
+      background_color: '#ffffff',
+      theme_color: '#4DBA87',
+      icons: [
+        {
+          src: '/icons/50.png',
+          sizes: '50x50',
+          type: 'image/png'
+        },
+        {
+          src: '/icons/192.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: '/icons/512.png',
+          sizes: '512x512',
+          type: 'image/png'
+        },
+      ]
+    },
+    workbox: {
+      navigateFallback: '/'
+    },
+    devOptions: {
+      enabled: true,
+      type: "module"
+    },
+    client: {
+      installPrompt: true
+    }
+  }
 })