fix: hydration mismatch on realtime chat page

sylaryip · Jan 6, 2025 · ae6e541 · ae6e541
1 parent b4399e4
commit ae6e541
Showing 1 changed file with 9 additions and 7 deletions.
diff --git a/pages/realtime/index.vue b/pages/realtime/index.vue
@@ -8,13 +8,15 @@ const realtimeChatEnabled = useStorage('realtimeChatEnabled', false)
 <template>
   <div class="flex items-center justify-center">
     <div class="max-w-md w-full p-6">
-      <h1 class="text-2xl font-bold mb-4 text-center dark:text-gray-100">{{ t('menu.realtime') }}</h1>
-      <p v-if="realtimeChatEnabled" class="text-center text-gray-600 dark:text-gray-400">
-        Click the microphone indicator at the right edge of the page to start a voice conversation.
-      </p>
-      <p v-else class="text-center text-gray-600 dark:text-gray-400">
-        Please <NuxtLink to="/settings" class="text-primary hover:underline">enable realtime chat in settings</NuxtLink> to start voice conversations.
-      </p>
+      <ClientOnly>
+        <h1 class="text-2xl font-bold mb-4 text-center dark:text-gray-100">{{ t('menu.realtime') }}</h1>
+        <p v-if="realtimeChatEnabled" class="text-center text-gray-600 dark:text-gray-400">
+          Click the microphone indicator at the right edge of the page to start a voice conversation.
+        </p>
+        <p v-else class="text-center text-gray-600 dark:text-gray-400">
+          Please <NuxtLink to="/settings" class="text-primary hover:underline">enable realtime chat in settings</NuxtLink> to start voice conversations.
+        </p>
+      </ClientOnly>
     </div>
   </div>
 </template>