copilot

Author: brillout

examples/vue-pinia/README.md

@@ -5,9 +5,10 @@ This example demonstrates:
 - Client-side state persistence using `pinia-plugin-persistedstate` (About page: counter persists across page reloads)
 - Using `onCreatePinia` hook to register Pinia plugins
 - Todo list with SSR data fetching and store population
+- Client-only rendering for persisted stores to avoid hydration mismatches
 
 > [!NOTE]
-> The home page uses a **non-persisted** store to demonstrate SSR without hydration issues. The about page uses a **persisted** store to demonstrate localStorage persistence.
+> The home page uses a **non-persisted** store to demonstrate SSR without hydration issues. The about page uses a **persisted** store with **client-only rendering** (`v-if="mounted"`) to avoid hydration mismatches between server (no localStorage) and client (has localStorage).
 
 > [!NOTE]
 > For more examples, see [Bati](https://batijs.dev) which generates `vike-vue` apps.

examples/vue-pinia/pages/about/+Page.vue

@@ -2,9 +2,16 @@
   <h1>About</h1>
   <p>Example of using Pinia with state persistence.</p>
   <p><strong>This counter persists across page reloads (stored in localStorage)</strong></p>
-  <PersistedCounter id="counter-3" />
+  <PersistedCounter v-if="mounted" id="counter-3" />
+  <div v-else>Loading...</div>
 </template>
 
 <script lang="ts" setup>
+import { ref, onMounted } from 'vue'
 import PersistedCounter from '../../components/PersistedCounter.vue'
+
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
 </script>