copilot

Author: brillout

examples/vue-pinia/README.md

@@ -1,9 +1,13 @@
 Example of using [Pinia](https://pinia.vuejs.org) with the `vike-vue-pinia` extension.
 
 This example demonstrates:
-- Basic Pinia store usage with SSR
-- Client-side state persistence using `pinia-plugin-persistedstate` (counter state persists across page reloads)
+- Basic Pinia store usage with SSR (Home page: counters synced between components)
+- 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
+
+> [!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.
 
 > [!NOTE]
 > For more examples, see [Bati](https://batijs.dev) which generates `vike-vue` apps.

examples/vue-pinia/components/PersistedCounter.vue

@@ -0,0 +1,9 @@
+<template>
+  <button type="button" @click="counterStore.increment">Persisted Counter {{ counterStore.count }}</button>
+</template>
+
+<script lang="ts" setup>
+import { usePersistedCounterStore } from '../stores/usePersistedCounterStore'
+
+const counterStore = usePersistedCounterStore()
+</script>

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

@@ -1,9 +1,10 @@
 <template>
   <h1>About</h1>
-  <p>Example of using Pinia.</p>
-  <Counter id="counter-3" />
+  <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" />
 </template>
 
 <script lang="ts" setup>
-import Counter from '../../components/Counter.vue'
+import PersistedCounter from '../../components/PersistedCounter.vue'
 </script>

examples/vue-pinia/stores/useCounterStore.ts

@@ -1,17 +1,10 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
-export const useCounterStore = defineStore(
-  'counter',
-  () => {
-    const count = ref(0)
+export const useCounterStore = defineStore('counter', () => {
+  const count = ref(0)
 
-    const increment = () => count.value++
+  const increment = () => count.value++
 
-    return { count, increment }
-  },
-  {
-    // Persist state to localStorage - counter persists across page reloads
-    persist: true,
-  },
-)
+  return { count, increment }
+})

examples/vue-pinia/stores/usePersistedCounterStore.ts

@@ -0,0 +1,17 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const usePersistedCounterStore = defineStore(
+  'persistedCounter',
+  () => {
+    const count = ref(0)
+
+    const increment = () => count.value++
+
+    return { count, increment }
+  },
+  {
+    // Persist state to localStorage - counter persists across page reloads
+    persist: true,
+  },
+)