Add fallback template to ClientOnly to prevent hydration mismatch

This commit is contained in:
2025-10-01 22:39:40 -04:00
parent fbb0ec8469
commit b0ede7dd61

View File

@@ -8,7 +8,7 @@
<img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" /> <img src="/logos/logo.png" alt="New Life Christian Church" class="h-16 w-auto" />
</div> </div>
<div class="flex items-center gap-4"> <div class="flex items-center gap-4">
<ClientOnly> <ClientOnly fallback-tag="div">
<template v-if="isAuthenticated"> <template v-if="isAuthenticated">
<NuxtLink <NuxtLink
to="/admin" to="/admin"
@@ -30,6 +30,9 @@
> >
Admin Login Admin Login
</NuxtLink> </NuxtLink>
<template #fallback>
<div class="h-10"></div>
</template>
</ClientOnly> </ClientOnly>
</div> </div>
</div> </div>