feat: +onCreatePinia (#2881)

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/package.json

@@ -8,6 +8,7 @@
   "dependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "pinia": "^3.0.1",
+    "pinia-plugin-persistedstate": "^4.7.1",
     "vike": "^0.4.247",
     "vike-vue": "^0.9.6",
     "vike-vue-pinia": "^0.2.3",

examples/vue-pinia/pages/+onCreatePinia.client.ts

@@ -0,0 +1,6 @@
+import type { PageContext } from 'vike/types'
+import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
+
+export function onCreatePinia(pageContext: PageContext) {
+  pageContext.pinia!.use(piniaPluginPersistedstate)
+}

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

@@ -2,8 +2,19 @@
   <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 v-if="mounted" id="counter-4" />
+  <div v-else>Loading...</div>
 </template>
 
 <script lang="ts" setup>
 import Counter from '../../components/Counter.vue'
+import { ref, onMounted } from 'vue'
+import PersistedCounter from '../../components/PersistedCounter.vue'
+
+const mounted = ref(false)
+onMounted(() => {
+  mounted.value = true
+})
 </script>

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,
+  },
+)

packages/vike-vue-pinia/integration/+config.ts

@@ -13,6 +13,12 @@ const config = {
   onCreateApp: 'import:vike-vue-pinia/__internal/integration/onCreateApp:onCreateApp',
   onAfterRenderHtml: 'import:vike-vue-pinia/__internal/integration/onAfterRenderHtml:onAfterRenderHtml',
   onCreatePageContext: 'import:vike-vue-pinia/__internal/integration/onCreatePageContext:onCreatePageContext',
+  meta: {
+    onCreatePinia: {
+      env: { client: true, server: true },
+      cumulative: true,
+    },
+  },
 } satisfies Config
 
 declare global {
@@ -24,5 +30,16 @@ declare global {
     interface GlobalContext {
       pinia?: Pinia
     }
+    interface Config {
+      /**
+       * Hook called after creating the Pinia instance.
+       *
+       * Use this to register Pinia plugins.
+       */
+      onCreatePinia?: (pageContext: PageContext) => void | Promise<void>
+    }
+    interface ConfigResolved {
+      onCreatePinia?: Array<(pageContext: PageContext) => void | Promise<void>>
+    }
   }
 }

packages/vike-vue-pinia/integration/createPiniaPlus.ts

@@ -0,0 +1,24 @@
+export { createPiniaPlus }
+
+import { createPinia } from 'pinia'
+import type { PageContext } from 'vike/types'
+
+// Call createPinia() and +onCreatePinia hooks
+async function createPiniaPlus(pageContext: PageContext, useGloablContext?: boolean) {
+  const pinia = createPinia()
+
+  if (useGloablContext) {
+    // Implicitly sets pageContext.pinia (because pageContext inherits all globalContext properties as fallback)
+    pageContext.globalContext.pinia = pinia
+  } else {
+    pageContext.pinia = pinia
+  }
+
+  // Call +onCreatePinia hooks
+  const { onCreatePinia } = pageContext.config
+  if (onCreatePinia) {
+    await Promise.all(onCreatePinia.map((hook) => hook(pageContext)))
+  }
+
+  return pinia
+}

packages/vike-vue-pinia/integration/onCreateApp.ts

@@ -1,14 +1,14 @@
 export { onCreateApp }
 
 import type { PageContext } from 'vike/types'
-import { createPinia } from 'pinia'
+import { createPiniaPlus } from './createPiniaPlus'
 
-function onCreateApp(pageContext: PageContext) {
+async function onCreateApp(pageContext: PageContext) {
   const { app } = pageContext
   if (!app) return
 
   if (pageContext.isClientSide) {
-    const pinia = createPinia()
+    const pinia = await createPiniaPlus(pageContext, true)
     const { _piniaInitialState } = pageContext
     if (_piniaInitialState) {
       pinia.state.value = {
@@ -18,7 +18,6 @@ function onCreateApp(pageContext: PageContext) {
         ...pinia.state.value,
       }
     }
-    pageContext.globalContext.pinia = pinia
   }
 
   app.use(pageContext.globalContext.pinia ?? pageContext.pinia!)

packages/vike-vue-pinia/integration/onCreatePageContext.server.ts

@@ -1,8 +1,8 @@
 export { onCreatePageContext }
 
 import type { PageContextServer } from 'vike/types'
-import { createPinia } from 'pinia'
+import { createPiniaPlus } from './createPiniaPlus'
 
-function onCreatePageContext(pageContext: PageContextServer) {
-  pageContext.pinia = createPinia()
+async function onCreatePageContext(pageContext: PageContextServer) {
+  await createPiniaPlus(pageContext)
 }