Add fallback template to ClientOnly to prevent hydration mismatch

2025-10-01 22:39:40 -04:00
parent fbb0ec8469
commit b0ede7dd61
1 changed files with 4 additions and 1 deletions
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -8,7 +8,7 @@
            <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
          </div>
          <div class="flex items-center gap-4">
-            <ClientOnly>
+            <ClientOnly fallback-tag="div">
              <template v-if="isAuthenticated">
                <NuxtLink 
                  to="/admin" 
@@ -30,6 +30,9 @@
              >
                Admin Login
              </NuxtLink>
+              <template #fallback>
+                <div class="h-10"></div>
+              </template>
            </ClientOnly>
          </div>
        </div>