RyderTech/nlcc-itinerary
1
0
Fork 0
Code Issues Pull Requests Packages Activity

Fix hydration mismatch by wrapping sermon heading in ClientOnly

Browse Source
This commit is contained in:
Joshua Ryder
2025-10-02 00:14:27 -04:00
parent 3cee9fefd7
commit 8df6f886f3
1 changed files with 6 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
pages/index.vue
View File

@@ -48,7 +48,12 @@
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
<!-- Most Recent Sermon -->
<div v-if="mostRecentSermon">
<h2 class="text-2xl font-semibold text-gray-900 mb-6">{{ sermonHeading }}</h2>
<ClientOnly>
<h2 class="text-2xl font-semibold text-gray-900 mb-6">{{ sermonHeading }}</h2>
<template #fallback>
<h2 class="text-2xl font-semibold text-gray-900 mb-6">Most Recent Sermon</h2>
</template>
</ClientOnly>
<div class="max-w-md mx-auto">
<SermonCard :sermon="mostRecentSermon" />
</div>