From e97b8133decdcd392a76f39d9707c872e303d6c2 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Thu, 23 Nov 2023 17:06:43 +0100
Subject: [PATCH] fix hydration error, ClientOnly component

---
 src/components/ClientOnly.vue | 13 +++++++++++++
 src/pages/app/index.page.vue  | 14 +++++++++++---
 2 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 src/components/ClientOnly.vue

diff --git a/src/components/ClientOnly.vue b/src/components/ClientOnly.vue
new file mode 100644
index 0000000..10ebb83
--- /dev/null
+++ b/src/components/ClientOnly.vue
@@ -0,0 +1,13 @@
+<template>
+  <template v-if="isMounted"><slot /></template>
+  <template v-else><slot name="placeholder" /></template>
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue'
+
+const isMounted = ref(false)
+onMounted(() => {
+  isMounted.value = true
+})
+</script>
diff --git a/src/pages/app/index.page.vue b/src/pages/app/index.page.vue
index de2ec8b..1621b0c 100644
--- a/src/pages/app/index.page.vue
+++ b/src/pages/app/index.page.vue
@@ -14,22 +14,30 @@
       <div v-if="page === undefined">
         <h1>The Counter</h1>
         <p>
-          The current value of the counter is: <b>{{ counter.count }}</b>
+          The current value of the counter is:
+          <ClientOnly
+            ><b>{{ counter.count }}</b></ClientOnly
+          >
         </p>
       </div>
       <div v-else-if="page === 'inc'">
         <h1>Increase the Counter</h1>
-        <v-btn elevation="2" @click="counter.increment()">{{ counter.count }}</v-btn>
+        <ClientOnly>
+          <v-btn elevation="2" @click="counter.increment()">{{ counter.count }}</v-btn>
+        </ClientOnly>
       </div>
       <div v-else-if="page === 'reset'">
         <h1>Reset the Counter</h1>
-        <v-btn elevation="2" @click="counter.reset()">{{ counter.count }}</v-btn>
+        <ClientOnly>
+          <v-btn elevation="2" @click="counter.reset()">{{ counter.count }}</v-btn>
+        </ClientOnly>
       </div>
     </template>
   </DefaultLayout>
 </template>
 
 <script lang="ts" setup>
+import ClientOnly from '#components/ClientOnly.vue'
 import DefaultLayout from '#layouts/DefaultLayout.vue'
 import { useCounterStore } from '#stores/counter'