From 1269b2e4892125c1868b84f88fe9fbb6543119ec Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 11 Oct 2025 19:02:23 -0600
Subject: [PATCH] Fix SSR error with navigator.onLine in index page

Use reactive ref with onMounted to safely access navigator.onLine
only on client-side, preventing server-side rendering errors.
---
 nuxt4-app/app/pages/index.vue | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/nuxt4-app/app/pages/index.vue b/nuxt4-app/app/pages/index.vue
index ef60e3e..6699775 100644
--- a/nuxt4-app/app/pages/index.vue
+++ b/nuxt4-app/app/pages/index.vue
@@ -1,5 +1,25 @@
 <script setup lang="ts">
 const { loggedIn, user } = useUserSession()
+
+// Estado de conexión (solo en cliente)
+const isOnline = ref(true)
+
+onMounted(() => {
+  // Inicializar estado de conexión
+  isOnline.value = navigator.onLine
+
+  // Escuchar cambios de conexión
+  const handleOnline = () => { isOnline.value = true }
+  const handleOffline = () => { isOnline.value = false }
+
+  window.addEventListener('online', handleOnline)
+  window.addEventListener('offline', handleOffline)
+
+  onUnmounted(() => {
+    window.removeEventListener('online', handleOnline)
+    window.removeEventListener('offline', handleOffline)
+  })
+})
 </script>
 
 <template>
@@ -48,8 +68,8 @@ const { loggedIn, user } = useUserSession()
                 </template>
                 <div class="space-y-2 text-sm">
                   <div class="flex items-center gap-2">
-                    <div class="w-2 h-2 rounded-full" :class="navigator.onLine ? 'bg-green-500' : 'bg-red-500'"></div>
-                    <span>{{ navigator.onLine ? 'En línea' : 'Sin conexión' }}</span>
+                    <div class="w-2 h-2 rounded-full" :class="isOnline ? 'bg-green-500' : 'bg-red-500'"></div>
+                    <span>{{ isOnline ? 'En línea' : 'Sin conexión' }}</span>
                   </div>
                   <p class="text-gray-600 dark:text-gray-400">
                     La aplicación funciona offline gracias al service worker