fix hydration error, ClientOnly component

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>

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'