Add PWA configuration and assets

- Install and configure @vite-pwa/nuxt module
- Generate app icons in multiple sizes (192x192, 512x512, 180x180)
- Create custom SVG icon with Nuxt + Authentik branding
- Configure PWA manifest with theme colors and display options
- Add Workbox service worker with caching strategies
- Include NetworkFirst caching for Authentik API
- Generate app store screenshots (mobile, tablet, desktop)
- Enable offline functionality and auto-updates

PWA Features:
- Installable on mobile and desktop
- Offline support with service worker
- Custom splash screens and icons
- Theme color: #00DC82 (Nuxt green)
- App name: Plantilla Nuxt + Authentik

nuxt4/nuxt.config.ts

@@ -8,7 +8,8 @@ export default defineNuxtConfig({
     '@nuxt/test-utils',
     '@nuxt/image',
     '@nuxt/eslint',
-    '@nuxt/content'
+    '@nuxt/content',
+    '@vite-pwa/nuxt'
   ],
 
   css: ['~/assets/css/main.css'],
@@ -17,5 +18,65 @@ export default defineNuxtConfig({
     public: {
       authentikUrl: process.env.NUXT_PUBLIC_AUTHENTIK_URL || 'https://authentik.nucleoriofrio.com'
     }
+  },
+
+  pwa: {
+    registerType: 'autoUpdate',
+    manifest: {
+      name: 'Plantilla Nuxt + Authentik',
+      short_name: 'NuxtAuth',
+      description: 'Plantilla de aplicación Nuxt 4 con autenticación mediante Authentik Proxy Outpost',
+      theme_color: '#00DC82',
+      background_color: '#ffffff',
+      display: 'standalone',
+      orientation: 'portrait',
+      scope: '/',
+      start_url: '/',
+      icons: [
+        {
+          src: '/icon-192x192.png',
+          sizes: '192x192',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any'
+        },
+        {
+          src: '/icon-512x512.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'maskable'
+        }
+      ]
+    },
+    workbox: {
+      navigateFallback: '/',
+      globPatterns: ['**/*.{js,css,html,png,svg,ico}'],
+      cleanupOutdatedCaches: true,
+      runtimeCaching: [
+        {
+          urlPattern: /^https:\/\/authentik\.nucleoriofrio\.com\/.*/i,
+          handler: 'NetworkFirst',
+          options: {
+            cacheName: 'authentik-api-cache',
+            expiration: {
+              maxEntries: 10,
+              maxAgeSeconds: 60 * 60 * 24 // 24 hours
+            },
+            cacheableResponse: {
+              statuses: [0, 200]
+            }
+          }
+        }
+      ]
+    },
+    devOptions: {
+      enabled: true,
+      type: 'module'
+    }
   }
 })

nuxt4/package.json

@@ -21,5 +21,8 @@
     "typescript": "^5.9.3",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
+  },
+  "devDependencies": {
+    "@vite-pwa/nuxt": "^1.0.4"
   }
 }

nuxt4/public/icon.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
+    </linearGradient>
+  </defs>
+
+  <!-- Background circle -->
+  <circle cx="256" cy="256" r="240" fill="url(#grad1)"/>
+
+  <!-- Shield shape (Authentik security) -->
+  <path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
+        fill="url(#grad2)" opacity="0.3"/>
+
+  <!-- Letter N (Nuxt) -->
+  <path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
+        fill="white" stroke="white" stroke-width="4"/>
+
+  <!-- Lock icon (Authentication) -->
+  <g transform="translate(340, 180)">
+    <rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
+    <path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
+          stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
+    <circle cx="0" cy="30" r="5" fill="url(#grad1)"/>
+  </g>
+</svg>