fix hydration

components/expenses/Card.vue → components/expenses/Card.client.vue

@@ -80,12 +80,14 @@ const expenseFormStore = useExpenseFormStore();
         <span class="flex-1"
           >Paid by <b>{{ author?.name }}</b></span
         >
-        <span>{{
-          new Date(expense.date).toLocaleDateString(undefined, {
-            timeZone: "UTC",
-            dateStyle: "long",
-          })
-        }}</span>
+        <span>
+          {{
+            new Date(expense.date).toLocaleDateString(undefined, {
+              timeZone: "UTC",
+              dateStyle: "long",
+            })
+          }}
+        </span>
       </p>
 
       <div class="flex flex-col sm:flex-row text-xs">

nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt"],
+  modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"],
   app: {
     head: {
       // https://github.com/saadeghi/daisyui/issues/1732

package.json

@@ -21,6 +21,8 @@
     "@prisma/client": "5.11.0",
     "@tailwindcss/typography": "0.5.10",
     "@types/lodash": "4.17.0",
+    "@vueuse/core": "^10.9.0",
+    "@vueuse/nuxt": "^10.9.0",
     "chart.js": "4.4.2",
     "daisyui": "4.8.0",
     "dinero.js": "2.0.0-alpha.14",

pages/[id].vue

@@ -29,12 +29,10 @@ watchEffect(() => {
 
 const tabId = ref(0);
 
-const currentMemberStr = useCookie(`${countId}_currentMember`);
-currentMemberStr.value = currentMemberStr.value ?? "";
-const currentMember = computed(() => {
-  const id = currentMemberStr.value;
-  return id ? parseInt(id) : undefined;
-});
+const currentMemberStr = useLocalStorage(`${countId}_currentMember`, "");
+const currentMember = computed(() =>
+  currentMemberStr.value ? parseInt(currentMemberStr.value) : undefined
+);
 </script>
 
 <template>