From 584c3e26cbf759736835141df920ff67bc54774c Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 12:20:25 +0100 Subject: [PATCH 01/20] copilot --- packages/vike-vue-pinia/CHANGELOG.md | 7 ++++++ packages/vike-vue-pinia/README.md | 23 +++++++++++++++++++ .../vike-vue-pinia/integration/+config.ts | 13 ++++++++++- .../vike-vue-pinia/integration/onCreateApp.ts | 8 +++++++ 4 files changed, 50 insertions(+), 1 deletion(-) diff --git a/packages/vike-vue-pinia/CHANGELOG.md b/packages/vike-vue-pinia/CHANGELOG.md index 3da6b056..2de328d6 100644 --- a/packages/vike-vue-pinia/CHANGELOG.md +++ b/packages/vike-vue-pinia/CHANGELOG.md @@ -1,3 +1,10 @@ +## [Unreleased] + +### Features + +* add `piniaPlugins` config to support client-side plugins (e.g. pinia-plugin-persistedstate) ([#2881](https://github.com/vikejs/vike/issues/2881)) + + ## [0.2.3](https://github.com/vikejs/vike-vue/compare/vike-vue-pinia@0.2.2...vike-vue-pinia@0.2.3) (2025-12-06) diff --git a/packages/vike-vue-pinia/README.md b/packages/vike-vue-pinia/README.md index aa8e7ba1..638211b8 100644 --- a/packages/vike-vue-pinia/README.md +++ b/packages/vike-vue-pinia/README.md @@ -8,6 +8,7 @@ Integrates [Pinia](https://pinia.vuejs.org) into your [`vike-vue`](https://vike. [Installation](#installation) [Example](#example) +[Pinia plugins (e.g. persistence)](#pinia-plugins-eg-persistence) [Populate store with `+data`](#populate-store-with-data) [Version history](#version-history) [See also](#see-also) @@ -62,6 +63,28 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v
+## Pinia plugins (e.g. persistence) + +To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), use the `piniaPlugins` config: + +```js +// pages/+config.js + +import vikeVue from 'vike-vue/config' +import vikeVuePinia from 'vike-vue-pinia/config' +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + +export default { + // ... + extends: [vikeVue, vikeVuePinia], + piniaPlugins: [piniaPluginPersistedstate] +} +``` + +The plugins are registered on the client-side before the SSR state is applied, allowing persisted state (e.g. from `localStorage`) to be properly merged with server state. + +
+ ## Populate store with `+data` To populate your store with data fetched via the [`+data`](https://vike.dev/data) hook, use [`+onData`](https://vike.dev/onData) and [`pageContext.data`](https://vike.dev/pageContext#data). diff --git a/packages/vike-vue-pinia/integration/+config.ts b/packages/vike-vue-pinia/integration/+config.ts index 26d90a44..5c76a56a 100644 --- a/packages/vike-vue-pinia/integration/+config.ts +++ b/packages/vike-vue-pinia/integration/+config.ts @@ -1,6 +1,6 @@ export { config as default } -import type { Pinia, StateTree } from 'pinia' +import type { Pinia, PiniaPlugin, StateTree } from 'pinia' import type { Config } from 'vike/types' import type _ from 'vike-vue/config' // Needed for declaration merging of Config @@ -13,6 +13,11 @@ 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: { + piniaPlugins: { + env: { client: true }, + }, + }, } satisfies Config declare global { @@ -24,5 +29,11 @@ declare global { interface GlobalContext { pinia?: Pinia } + interface Config { + piniaPlugins?: PiniaPlugin[] + } + interface ConfigResolved { + piniaPlugins?: PiniaPlugin[] + } } } diff --git a/packages/vike-vue-pinia/integration/onCreateApp.ts b/packages/vike-vue-pinia/integration/onCreateApp.ts index 36f4b801..18fb7518 100644 --- a/packages/vike-vue-pinia/integration/onCreateApp.ts +++ b/packages/vike-vue-pinia/integration/onCreateApp.ts @@ -9,6 +9,14 @@ function onCreateApp(pageContext: PageContext) { if (pageContext.isClientSide) { const pinia = createPinia() + + // Register user-provided plugins before setting initial state + // https://github.com/vikejs/vike/issues/2881 + const { piniaPlugins } = pageContext.config + if (piniaPlugins) { + piniaPlugins.forEach(plugin => pinia.use(plugin)) + } + const { _piniaInitialState } = pageContext if (_piniaInitialState) { pinia.state.value = { From 67d4220b8b1e66d7333697d948c6072345be88ae Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 12:23:51 +0100 Subject: [PATCH 02/20] copilot --- packages/vike-vue-pinia/CHANGELOG.md | 2 +- packages/vike-vue-pinia/README.md | 8 +++--- .../vike-vue-pinia/integration/+config.ts | 27 ++++++++++++++++--- .../vike-vue-pinia/integration/onCreateApp.ts | 11 ++++---- 4 files changed, 35 insertions(+), 13 deletions(-) diff --git a/packages/vike-vue-pinia/CHANGELOG.md b/packages/vike-vue-pinia/CHANGELOG.md index 2de328d6..2ec24cee 100644 --- a/packages/vike-vue-pinia/CHANGELOG.md +++ b/packages/vike-vue-pinia/CHANGELOG.md @@ -2,7 +2,7 @@ ### Features -* add `piniaPlugins` config to support client-side plugins (e.g. pinia-plugin-persistedstate) ([#2881](https://github.com/vikejs/vike/issues/2881)) +* add `onCreatePinia` hook to support Pinia plugins (e.g. pinia-plugin-persistedstate) ([#2881](https://github.com/vikejs/vike/issues/2881)) ## [0.2.3](https://github.com/vikejs/vike-vue/compare/vike-vue-pinia@0.2.2...vike-vue-pinia@0.2.3) (2025-12-06) diff --git a/packages/vike-vue-pinia/README.md b/packages/vike-vue-pinia/README.md index 638211b8..ba4891dc 100644 --- a/packages/vike-vue-pinia/README.md +++ b/packages/vike-vue-pinia/README.md @@ -65,7 +65,7 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v ## Pinia plugins (e.g. persistence) -To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), use the `piniaPlugins` config: +To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), use the `onCreatePinia` hook: ```js // pages/+config.js @@ -77,11 +77,13 @@ import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' export default { // ... extends: [vikeVue, vikeVuePinia], - piniaPlugins: [piniaPluginPersistedstate] + onCreatePinia({ pinia }) { + pinia.use(piniaPluginPersistedstate) + } } ``` -The plugins are registered on the client-side before the SSR state is applied, allowing persisted state (e.g. from `localStorage`) to be properly merged with server state. +The `onCreatePinia` hook is called after creating the Pinia instance but before the SSR state is applied, allowing persisted state (e.g. from `localStorage`) to be properly merged with server state.
diff --git a/packages/vike-vue-pinia/integration/+config.ts b/packages/vike-vue-pinia/integration/+config.ts index 5c76a56a..25e19694 100644 --- a/packages/vike-vue-pinia/integration/+config.ts +++ b/packages/vike-vue-pinia/integration/+config.ts @@ -1,6 +1,6 @@ export { config as default } -import type { Pinia, PiniaPlugin, StateTree } from 'pinia' +import type { Pinia, StateTree } from 'pinia' import type { Config } from 'vike/types' import type _ from 'vike-vue/config' // Needed for declaration merging of Config @@ -14,8 +14,9 @@ const config = { onAfterRenderHtml: 'import:vike-vue-pinia/__internal/integration/onAfterRenderHtml:onAfterRenderHtml', onCreatePageContext: 'import:vike-vue-pinia/__internal/integration/onCreatePageContext:onCreatePageContext', meta: { - piniaPlugins: { + onCreatePinia: { env: { client: true }, + cumulative: true, }, }, } satisfies Config @@ -30,10 +31,28 @@ declare global { pinia?: Pinia } interface Config { - piniaPlugins?: PiniaPlugin[] + /** + * Hook called after creating the Pinia instance but before applying initial state. + * Use this to register Pinia plugins. + * + * @example + * ```js + * // pages/+config.js + * import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + * + * export default { + * onCreatePinia({ pinia }) { + * pinia.use(piniaPluginPersistedstate) + * } + * } + * ``` + * + * https://github.com/vikejs/vike/issues/2881 + */ + onCreatePinia?: (pageContext: PageContext) => void | Promise } interface ConfigResolved { - piniaPlugins?: PiniaPlugin[] + onCreatePinia?: Array<(pageContext: PageContext) => void | Promise> } } } diff --git a/packages/vike-vue-pinia/integration/onCreateApp.ts b/packages/vike-vue-pinia/integration/onCreateApp.ts index 18fb7518..77d886d6 100644 --- a/packages/vike-vue-pinia/integration/onCreateApp.ts +++ b/packages/vike-vue-pinia/integration/onCreateApp.ts @@ -3,18 +3,19 @@ export { onCreateApp } import type { PageContext } from 'vike/types' import { createPinia } from 'pinia' -function onCreateApp(pageContext: PageContext) { +async function onCreateApp(pageContext: PageContext) { const { app } = pageContext if (!app) return if (pageContext.isClientSide) { const pinia = createPinia() + pageContext.pinia = pinia - // Register user-provided plugins before setting initial state + // Call user-provided onCreatePinia hooks to register plugins // https://github.com/vikejs/vike/issues/2881 - const { piniaPlugins } = pageContext.config - if (piniaPlugins) { - piniaPlugins.forEach(plugin => pinia.use(plugin)) + const { onCreatePinia } = pageContext.config + if (onCreatePinia) { + await Promise.all(onCreatePinia.map(hook => hook(pageContext))) } const { _piniaInitialState } = pageContext From 742808edbd40e8fe3feeeea9d11bfb45803a3fc1 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 13:29:22 +0100 Subject: [PATCH 03/20] fmt --- packages/vike-vue-pinia/integration/+config.ts | 6 +++--- packages/vike-vue-pinia/integration/onCreateApp.ts | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/vike-vue-pinia/integration/+config.ts b/packages/vike-vue-pinia/integration/+config.ts index 25e19694..cce8f7ef 100644 --- a/packages/vike-vue-pinia/integration/+config.ts +++ b/packages/vike-vue-pinia/integration/+config.ts @@ -34,19 +34,19 @@ declare global { /** * Hook called after creating the Pinia instance but before applying initial state. * Use this to register Pinia plugins. - * + * * @example * ```js * // pages/+config.js * import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' - * + * * export default { * onCreatePinia({ pinia }) { * pinia.use(piniaPluginPersistedstate) * } * } * ``` - * + * * https://github.com/vikejs/vike/issues/2881 */ onCreatePinia?: (pageContext: PageContext) => void | Promise diff --git a/packages/vike-vue-pinia/integration/onCreateApp.ts b/packages/vike-vue-pinia/integration/onCreateApp.ts index 77d886d6..db38c90b 100644 --- a/packages/vike-vue-pinia/integration/onCreateApp.ts +++ b/packages/vike-vue-pinia/integration/onCreateApp.ts @@ -10,14 +10,14 @@ async function onCreateApp(pageContext: PageContext) { if (pageContext.isClientSide) { const pinia = createPinia() pageContext.pinia = pinia - + // Call user-provided onCreatePinia hooks to register plugins // https://github.com/vikejs/vike/issues/2881 const { onCreatePinia } = pageContext.config if (onCreatePinia) { - await Promise.all(onCreatePinia.map(hook => hook(pageContext))) + await Promise.all(onCreatePinia.map((hook) => hook(pageContext))) } - + const { _piniaInitialState } = pageContext if (_piniaInitialState) { pinia.state.value = { From db99573eca67e90f9a8ca62add91a548c0901a8e Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 13:34:51 +0100 Subject: [PATCH 04/20] wip --- packages/vike-vue-pinia/CHANGELOG.md | 7 ------- .../vike-vue-pinia/integration/+config.ts | 19 ++++--------------- .../vike-vue-pinia/integration/onCreateApp.ts | 3 +-- 3 files changed, 5 insertions(+), 24 deletions(-) diff --git a/packages/vike-vue-pinia/CHANGELOG.md b/packages/vike-vue-pinia/CHANGELOG.md index 2ec24cee..3da6b056 100644 --- a/packages/vike-vue-pinia/CHANGELOG.md +++ b/packages/vike-vue-pinia/CHANGELOG.md @@ -1,10 +1,3 @@ -## [Unreleased] - -### Features - -* add `onCreatePinia` hook to support Pinia plugins (e.g. pinia-plugin-persistedstate) ([#2881](https://github.com/vikejs/vike/issues/2881)) - - ## [0.2.3](https://github.com/vikejs/vike-vue/compare/vike-vue-pinia@0.2.2...vike-vue-pinia@0.2.3) (2025-12-06) diff --git a/packages/vike-vue-pinia/integration/+config.ts b/packages/vike-vue-pinia/integration/+config.ts index cce8f7ef..c7348345 100644 --- a/packages/vike-vue-pinia/integration/+config.ts +++ b/packages/vike-vue-pinia/integration/+config.ts @@ -15,7 +15,7 @@ const config = { onCreatePageContext: 'import:vike-vue-pinia/__internal/integration/onCreatePageContext:onCreatePageContext', meta: { onCreatePinia: { - env: { client: true }, + env: { client: true, server: true }, cumulative: true, }, }, @@ -32,22 +32,11 @@ declare global { } interface Config { /** - * Hook called after creating the Pinia instance but before applying initial state. - * Use this to register Pinia plugins. - * - * @example - * ```js - * // pages/+config.js - * import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + * Hook called after creating the Pinia instance. * - * export default { - * onCreatePinia({ pinia }) { - * pinia.use(piniaPluginPersistedstate) - * } - * } - * ``` + * Use this to register Pinia plugins. * - * https://github.com/vikejs/vike/issues/2881 + * https://vike.dev/onCreatePinia */ onCreatePinia?: (pageContext: PageContext) => void | Promise } diff --git a/packages/vike-vue-pinia/integration/onCreateApp.ts b/packages/vike-vue-pinia/integration/onCreateApp.ts index db38c90b..7f85415a 100644 --- a/packages/vike-vue-pinia/integration/onCreateApp.ts +++ b/packages/vike-vue-pinia/integration/onCreateApp.ts @@ -11,8 +11,7 @@ async function onCreateApp(pageContext: PageContext) { const pinia = createPinia() pageContext.pinia = pinia - // Call user-provided onCreatePinia hooks to register plugins - // https://github.com/vikejs/vike/issues/2881 + // Call +onCreatePinia hooks const { onCreatePinia } = pageContext.config if (onCreatePinia) { await Promise.all(onCreatePinia.map((hook) => hook(pageContext))) From 11a92c6676bf948474504822c37b2e3a2b91c7e8 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 13:36:46 +0100 Subject: [PATCH 05/20] rm doc --- packages/vike-vue-pinia/README.md | 25 ------------------------- 1 file changed, 25 deletions(-) diff --git a/packages/vike-vue-pinia/README.md b/packages/vike-vue-pinia/README.md index ba4891dc..aa8e7ba1 100644 --- a/packages/vike-vue-pinia/README.md +++ b/packages/vike-vue-pinia/README.md @@ -8,7 +8,6 @@ Integrates [Pinia](https://pinia.vuejs.org) into your [`vike-vue`](https://vike. [Installation](#installation) [Example](#example) -[Pinia plugins (e.g. persistence)](#pinia-plugins-eg-persistence) [Populate store with `+data`](#populate-store-with-data) [Version history](#version-history) [See also](#see-also) @@ -63,30 +62,6 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v
-## Pinia plugins (e.g. persistence) - -To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), use the `onCreatePinia` hook: - -```js -// pages/+config.js - -import vikeVue from 'vike-vue/config' -import vikeVuePinia from 'vike-vue-pinia/config' -import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' - -export default { - // ... - extends: [vikeVue, vikeVuePinia], - onCreatePinia({ pinia }) { - pinia.use(piniaPluginPersistedstate) - } -} -``` - -The `onCreatePinia` hook is called after creating the Pinia instance but before the SSR state is applied, allowing persisted state (e.g. from `localStorage`) to be properly merged with server state. - -
- ## Populate store with `+data` To populate your store with data fetched via the [`+data`](https://vike.dev/data) hook, use [`+onData`](https://vike.dev/onData) and [`pageContext.data`](https://vike.dev/pageContext#data). From 11fd1919c20be60d24b8c1ae95e57cf414d93ac0 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 13:54:13 +0100 Subject: [PATCH 06/20] proper implementatoin --- .../integration/createPiniaPlus.ts | 24 +++++++++++++++++++ .../vike-vue-pinia/integration/onCreateApp.ts | 13 ++-------- .../integration/onCreatePageContext.server.ts | 6 ++--- 3 files changed, 29 insertions(+), 14 deletions(-) create mode 100644 packages/vike-vue-pinia/integration/createPiniaPlus.ts diff --git a/packages/vike-vue-pinia/integration/createPiniaPlus.ts b/packages/vike-vue-pinia/integration/createPiniaPlus.ts new file mode 100644 index 00000000..adc5e7f6 --- /dev/null +++ b/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 (as fallback) globalContext properties) + 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 +} diff --git a/packages/vike-vue-pinia/integration/onCreateApp.ts b/packages/vike-vue-pinia/integration/onCreateApp.ts index 7f85415a..4bed0e45 100644 --- a/packages/vike-vue-pinia/integration/onCreateApp.ts +++ b/packages/vike-vue-pinia/integration/onCreateApp.ts @@ -1,22 +1,14 @@ export { onCreateApp } import type { PageContext } from 'vike/types' -import { createPinia } from 'pinia' +import { createPiniaPlus } from './createPiniaPlus' async function onCreateApp(pageContext: PageContext) { const { app } = pageContext if (!app) return if (pageContext.isClientSide) { - const pinia = createPinia() - pageContext.pinia = pinia - - // Call +onCreatePinia hooks - const { onCreatePinia } = pageContext.config - if (onCreatePinia) { - await Promise.all(onCreatePinia.map((hook) => hook(pageContext))) - } - + const pinia = await createPiniaPlus(pageContext, true) const { _piniaInitialState } = pageContext if (_piniaInitialState) { pinia.state.value = { @@ -26,7 +18,6 @@ async function onCreateApp(pageContext: PageContext) { ...pinia.state.value, } } - pageContext.globalContext.pinia = pinia } app.use(pageContext.globalContext.pinia ?? pageContext.pinia!) diff --git a/packages/vike-vue-pinia/integration/onCreatePageContext.server.ts b/packages/vike-vue-pinia/integration/onCreatePageContext.server.ts index 9a0eb5b4..2cad2b2b 100644 --- a/packages/vike-vue-pinia/integration/onCreatePageContext.server.ts +++ b/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) } From f1e4c67fb72d881d1ff461798ea2b4f039191ce8 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 13:57:03 +0100 Subject: [PATCH 07/20] comment --- packages/vike-vue-pinia/integration/createPiniaPlus.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/vike-vue-pinia/integration/createPiniaPlus.ts b/packages/vike-vue-pinia/integration/createPiniaPlus.ts index adc5e7f6..eda43e36 100644 --- a/packages/vike-vue-pinia/integration/createPiniaPlus.ts +++ b/packages/vike-vue-pinia/integration/createPiniaPlus.ts @@ -8,7 +8,7 @@ async function createPiniaPlus(pageContext: PageContext, useGloablContext?: bool const pinia = createPinia() if (useGloablContext) { - // Implicitly sets pageContext.pinia (because pageContext inherits all (as fallback) globalContext properties) + // Implicitly sets pageContext.pinia (because pageContext inherits all globalContext properties as fallback) pageContext.globalContext.pinia = pinia } else { pageContext.pinia = pinia From 369f37a8ec91016680b66271d25bad55d03cc723 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 14:02:35 +0100 Subject: [PATCH 08/20] update to-do --- examples/vue-pinia/package.json | 1 + examples/vue-pinia/pages/+onCreatePinia.ts | 3 ++ pnpm-lock.yaml | 56 ++++++++++++++++------ 3 files changed, 46 insertions(+), 14 deletions(-) create mode 100644 examples/vue-pinia/pages/+onCreatePinia.ts diff --git a/examples/vue-pinia/package.json b/examples/vue-pinia/package.json index a068fdd9..a354d8d3 100644 --- a/examples/vue-pinia/package.json +++ b/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.237", "vike-vue": "^0.9.6", "vike-vue-pinia": "^0.2.3", diff --git a/examples/vue-pinia/pages/+onCreatePinia.ts b/examples/vue-pinia/pages/+onCreatePinia.ts new file mode 100644 index 00000000..3886b897 --- /dev/null +++ b/examples/vue-pinia/pages/+onCreatePinia.ts @@ -0,0 +1,3 @@ +export function nonCreatePinia() { + // TODO/copilot implement, see https://prazdevs.github.io/pinia-plugin-persistedstate/guide/ and https://github.com/vikejs/vike/issues/2881#issuecomment-3624267205 and also modify the example to use a persisted store +} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d7857137..f4be8639 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -39,7 +39,7 @@ importers: version: 2.6.11 '@vitejs/plugin-vue': specifier: ^6.0.1 - version: 6.0.1(vite@7.1.5)(vue@3.5.13(typescript@5.9.2)) + version: 6.0.1(vite@7.1.5(@types/node@22.3.0))(vue@3.5.13(typescript@5.9.2)) node-fetch: specifier: ^3.3.2 version: 3.3.2 @@ -51,7 +51,7 @@ importers: version: 0.26.2(rollup@4.50.2)(vite@7.1.5(@types/node@22.3.0)) vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vike-vue: specifier: link:../../packages/vike-vue version: link:../../packages/vike-vue @@ -75,10 +75,10 @@ importers: dependencies: '@vitejs/plugin-vue': specifier: ^6.0.1 - version: 6.0.1(vite@7.1.5)(vue@3.5.13(typescript@5.9.2)) + version: 6.0.1(vite@7.1.5(@types/node@22.3.0))(vue@3.5.13(typescript@5.9.2)) vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vike-vue: specifier: link:../../packages/vike-vue version: link:../../packages/vike-vue @@ -93,13 +93,16 @@ importers: dependencies: '@vitejs/plugin-vue': specifier: ^6.0.1 - version: 6.0.1(vite@7.1.5)(vue@3.5.13(typescript@5.9.2)) + version: 6.0.1(vite@7.1.5(@types/node@22.3.0))(vue@3.5.13(typescript@5.9.2)) pinia: specifier: ^3.0.1 version: 3.0.1(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2)) + pinia-plugin-persistedstate: + specifier: ^4.7.1 + version: 4.7.1(pinia@3.0.1(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2))) vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vike-vue: specifier: link:../../packages/vike-vue version: link:../../packages/vike-vue @@ -130,7 +133,7 @@ importers: version: 2.6.11 '@vitejs/plugin-vue': specifier: ^6.0.1 - version: 6.0.1(vite@7.1.5)(vue@3.5.13(typescript@5.9.2)) + version: 6.0.1(vite@7.1.5(@types/node@22.3.0))(vue@3.5.13(typescript@5.9.2)) node-fetch: specifier: ^3.3.2 version: 3.3.2 @@ -139,7 +142,7 @@ importers: version: 5.9.2 vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vike-vue: specifier: link:../../packages/vike-vue version: link:../../packages/vike-vue @@ -166,13 +169,13 @@ importers: version: 22.3.0 '@vitejs/plugin-vue': specifier: ^6.0.1 - version: 6.0.1(vite@7.1.5)(vue@3.5.13(typescript@5.9.2)) + version: 6.0.1(vite@7.1.5(@types/node@22.3.0))(vue@3.5.13(typescript@5.9.2)) typescript: specifier: ^5.9.2 version: 5.9.2 vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vite: specifier: ^7.1.5 version: 7.1.5(@types/node@22.3.0) @@ -202,7 +205,7 @@ importers: version: 5.9.2 vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vike-vue: specifier: link:../vike-vue version: link:../vike-vue @@ -229,7 +232,7 @@ importers: version: 5.9.2 vike: specifier: ^0.4.237 - version: 0.4.237(vite@7.1.5) + version: 0.4.237(vite@7.1.5(@types/node@22.3.0)) vike-vue: specifier: link:../vike-vue version: link:../vike-vue @@ -1282,6 +1285,9 @@ packages: resolution: {integrity: sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==} engines: {node: '>=6'} + defu@6.1.4: + resolution: {integrity: sha512-mEQCMmwJu317oSz8CwdIOdwf3xMif1ttiM8LTufzc3g6kR+9Pe236twL8j3IYT1F7GfRgGcW6MWxzZjLIkuHIg==} + delayed-stream@1.0.0: resolution: {integrity: sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==} engines: {node: '>=0.4.0'} @@ -1674,6 +1680,20 @@ packages: resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==} engines: {node: '>=12'} + pinia-plugin-persistedstate@4.7.1: + resolution: {integrity: sha512-WHOqh2esDlR3eAaknPbqXrkkj0D24h8shrDPqysgCFR6ghqP/fpFfJmMPJp0gETHsvrh9YNNg6dQfo2OEtDnIQ==} + peerDependencies: + '@nuxt/kit': '>=3.0.0' + '@pinia/nuxt': '>=0.10.0' + pinia: '>=3.0.0' + peerDependenciesMeta: + '@nuxt/kit': + optional: true + '@pinia/nuxt': + optional: true + pinia: + optional: true + pinia@3.0.1: resolution: {integrity: sha512-WXglsDzztOTH6IfcJ99ltYZin2mY8XZCXujkYWVIJlBjqsP6ST7zw+Aarh63E1cDVYeyUcPCxPHzJpEOmzB6Wg==} peerDependencies: @@ -2598,7 +2618,7 @@ snapshots: '@types/normalize-package-data@2.4.4': {} - '@vitejs/plugin-vue@6.0.1(vite@7.1.5)(vue@3.5.13(typescript@5.9.2))': + '@vitejs/plugin-vue@6.0.1(vite@7.1.5(@types/node@22.3.0))(vue@3.5.13(typescript@5.9.2))': dependencies: '@rolldown/pluginutils': 1.0.0-beta.29 vite: 7.1.5(@types/node@22.3.0) @@ -2907,6 +2927,8 @@ snapshots: dependencies: type-detect: 4.1.0 + defu@6.1.4: {} + delayed-stream@1.0.0: {} dot-prop@5.3.0: @@ -3305,6 +3327,12 @@ snapshots: picomatch@4.0.3: {} + pinia-plugin-persistedstate@4.7.1(pinia@3.0.1(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2))): + dependencies: + defu: 6.1.4 + optionalDependencies: + pinia: 3.0.1(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2)) + pinia@3.0.1(typescript@5.9.2)(vue@3.5.13(typescript@5.9.2)): dependencies: '@vue/devtools-api': 7.7.2 @@ -3540,7 +3568,7 @@ snapshots: validator@13.12.0: {} - vike@0.4.237(vite@7.1.5): + vike@0.4.237(vite@7.1.5(@types/node@22.3.0)): dependencies: '@brillout/import': 0.2.6 '@brillout/json-serializer': 0.5.17 From d1296b58a6d5d8452ea9a340cffaa7d225abc791 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 19:44:53 +0100 Subject: [PATCH 09/20] copilot --- examples/vue-pinia/README.md | 5 +++++ examples/vue-pinia/pages/+onCreatePinia.ts | 7 +++++-- examples/vue-pinia/stores/useCounterStore.ts | 17 ++++++++++++----- 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/examples/vue-pinia/README.md b/examples/vue-pinia/README.md index 1b09f542..8467ecb3 100644 --- a/examples/vue-pinia/README.md +++ b/examples/vue-pinia/README.md @@ -1,5 +1,10 @@ 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) +- Using `onCreatePinia` hook to register Pinia plugins + > [!NOTE] > For more examples, see [Bati](https://batijs.dev) which generates `vike-vue` apps. diff --git a/examples/vue-pinia/pages/+onCreatePinia.ts b/examples/vue-pinia/pages/+onCreatePinia.ts index 3886b897..9622c5c1 100644 --- a/examples/vue-pinia/pages/+onCreatePinia.ts +++ b/examples/vue-pinia/pages/+onCreatePinia.ts @@ -1,3 +1,6 @@ -export function nonCreatePinia() { - // TODO/copilot implement, see https://prazdevs.github.io/pinia-plugin-persistedstate/guide/ and https://github.com/vikejs/vike/issues/2881#issuecomment-3624267205 and also modify the example to use a persisted store +import type { PageContext } from 'vike/types' +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + +export function onCreatePinia(pageContext: PageContext) { + pageContext.pinia!.use(piniaPluginPersistedstate) } diff --git a/examples/vue-pinia/stores/useCounterStore.ts b/examples/vue-pinia/stores/useCounterStore.ts index c6189a9b..0d773f19 100644 --- a/examples/vue-pinia/stores/useCounterStore.ts +++ b/examples/vue-pinia/stores/useCounterStore.ts @@ -1,10 +1,17 @@ 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 } -}) + return { count, increment } + }, + { + // Persist state to localStorage - counter persists across page reloads + persist: true, + }, +) From 53bdc541d6a10a2b637c8307c6e9d432ae34015e Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 19:51:05 +0100 Subject: [PATCH 10/20] copilot --- examples/vue-pinia/pages/+onCreatePinia.ts | 5 ++++- packages/vike-vue-pinia/README.md | 24 ++++++++++++++++++++++ 2 files changed, 28 insertions(+), 1 deletion(-) diff --git a/examples/vue-pinia/pages/+onCreatePinia.ts b/examples/vue-pinia/pages/+onCreatePinia.ts index 9622c5c1..8450e230 100644 --- a/examples/vue-pinia/pages/+onCreatePinia.ts +++ b/examples/vue-pinia/pages/+onCreatePinia.ts @@ -2,5 +2,8 @@ import type { PageContext } from 'vike/types' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' export function onCreatePinia(pageContext: PageContext) { - pageContext.pinia!.use(piniaPluginPersistedstate) + // Only register persistence plugin on client-side (it uses localStorage) + if (pageContext.isClientSide) { + pageContext.pinia!.use(piniaPluginPersistedstate) + } } diff --git a/packages/vike-vue-pinia/README.md b/packages/vike-vue-pinia/README.md index aa8e7ba1..1d80ce1c 100644 --- a/packages/vike-vue-pinia/README.md +++ b/packages/vike-vue-pinia/README.md @@ -8,6 +8,7 @@ Integrates [Pinia](https://pinia.vuejs.org) into your [`vike-vue`](https://vike. [Installation](#installation) [Example](#example) +[Pinia plugins](#pinia-plugins) [Populate store with `+data`](#populate-store-with-data) [Version history](#version-history) [See also](#see-also) @@ -62,6 +63,29 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v
+## Pinia plugins + +To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), define an `onCreatePinia()` hook: + +```js +// pages/+onCreatePinia.js + +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + +export function onCreatePinia(pageContext) { + // Only register on client-side (plugin uses localStorage) + if (pageContext.isClientSide) { + pageContext.pinia.use(piniaPluginPersistedstate) + } +} +``` + +The `onCreatePinia()` hook is called after creating the Pinia instance but before the SSR state is applied, allowing persisted state (e.g. from `localStorage`) to be properly merged with server state. + +See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/vue-pinia) for a working example. + +
+ ## Populate store with `+data` To populate your store with data fetched via the [`+data`](https://vike.dev/data) hook, use [`+onData`](https://vike.dev/onData) and [`pageContext.data`](https://vike.dev/pageContext#data). From 22d84bacf290fabaddc52e2037ba8277d1d9eec0 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 19:53:24 +0100 Subject: [PATCH 11/20] copilot --- ...nCreatePinia.ts => +onCreatePinia.client.ts} | 5 +---- packages/vike-vue-pinia/README.md | 17 +++++++++++++++-- 2 files changed, 16 insertions(+), 6 deletions(-) rename examples/vue-pinia/pages/{+onCreatePinia.ts => +onCreatePinia.client.ts} (51%) diff --git a/examples/vue-pinia/pages/+onCreatePinia.ts b/examples/vue-pinia/pages/+onCreatePinia.client.ts similarity index 51% rename from examples/vue-pinia/pages/+onCreatePinia.ts rename to examples/vue-pinia/pages/+onCreatePinia.client.ts index 8450e230..9622c5c1 100644 --- a/examples/vue-pinia/pages/+onCreatePinia.ts +++ b/examples/vue-pinia/pages/+onCreatePinia.client.ts @@ -2,8 +2,5 @@ import type { PageContext } from 'vike/types' import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' export function onCreatePinia(pageContext: PageContext) { - // Only register persistence plugin on client-side (it uses localStorage) - if (pageContext.isClientSide) { - pageContext.pinia!.use(piniaPluginPersistedstate) - } + pageContext.pinia!.use(piniaPluginPersistedstate) } diff --git a/packages/vike-vue-pinia/README.md b/packages/vike-vue-pinia/README.md index 1d80ce1c..525e2713 100644 --- a/packages/vike-vue-pinia/README.md +++ b/packages/vike-vue-pinia/README.md @@ -65,7 +65,21 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v ## Pinia plugins -To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), define an `onCreatePinia()` hook: +To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), define an `onCreatePinia()` hook. + +For client-only plugins (e.g. plugins that use `localStorage`), use the `.client.ts` suffix: + +```js +// pages/+onCreatePinia.client.js + +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' + +export function onCreatePinia(pageContext) { + pageContext.pinia.use(piniaPluginPersistedstate) +} +``` + +Alternatively, you can use an environment check: ```js // pages/+onCreatePinia.js @@ -73,7 +87,6 @@ To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.gi import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' export function onCreatePinia(pageContext) { - // Only register on client-side (plugin uses localStorage) if (pageContext.isClientSide) { pageContext.pinia.use(piniaPluginPersistedstate) } From eacad2e873906042b5bf2b885787d569bc0321d9 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 20:00:20 +0100 Subject: [PATCH 12/20] copilot --- examples/vue-pinia/README.md | 8 ++++++-- .../vue-pinia/components/PersistedCounter.vue | 9 +++++++++ examples/vue-pinia/pages/about/+Page.vue | 7 ++++--- examples/vue-pinia/stores/useCounterStore.ts | 17 +++++------------ .../stores/usePersistedCounterStore.ts | 17 +++++++++++++++++ 5 files changed, 41 insertions(+), 17 deletions(-) create mode 100644 examples/vue-pinia/components/PersistedCounter.vue create mode 100644 examples/vue-pinia/stores/usePersistedCounterStore.ts diff --git a/examples/vue-pinia/README.md b/examples/vue-pinia/README.md index 8467ecb3..af0eb9cf 100644 --- a/examples/vue-pinia/README.md +++ b/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. diff --git a/examples/vue-pinia/components/PersistedCounter.vue b/examples/vue-pinia/components/PersistedCounter.vue new file mode 100644 index 00000000..c24e0d85 --- /dev/null +++ b/examples/vue-pinia/components/PersistedCounter.vue @@ -0,0 +1,9 @@ + + + diff --git a/examples/vue-pinia/pages/about/+Page.vue b/examples/vue-pinia/pages/about/+Page.vue index 3e7c3e28..4169969a 100644 --- a/examples/vue-pinia/pages/about/+Page.vue +++ b/examples/vue-pinia/pages/about/+Page.vue @@ -1,9 +1,10 @@ diff --git a/examples/vue-pinia/stores/useCounterStore.ts b/examples/vue-pinia/stores/useCounterStore.ts index 0d773f19..c6189a9b 100644 --- a/examples/vue-pinia/stores/useCounterStore.ts +++ b/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 } +}) diff --git a/examples/vue-pinia/stores/usePersistedCounterStore.ts b/examples/vue-pinia/stores/usePersistedCounterStore.ts new file mode 100644 index 00000000..99ac700b --- /dev/null +++ b/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, + }, +) From 29aa2eb915fe902e79ff8fc2ca6dcb63dcab93af Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 20:10:00 +0100 Subject: [PATCH 13/20] copilot --- examples/vue-pinia/README.md | 3 ++- examples/vue-pinia/pages/about/+Page.vue | 9 ++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/examples/vue-pinia/README.md b/examples/vue-pinia/README.md index af0eb9cf..3579ed95 100644 --- a/examples/vue-pinia/README.md +++ b/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. diff --git a/examples/vue-pinia/pages/about/+Page.vue b/examples/vue-pinia/pages/about/+Page.vue index 4169969a..fe737309 100644 --- a/examples/vue-pinia/pages/about/+Page.vue +++ b/examples/vue-pinia/pages/about/+Page.vue @@ -2,9 +2,16 @@

About

Example of using Pinia with state persistence.

This counter persists across page reloads (stored in localStorage)

- + +
Loading...
From 9525842481ca1f804b76d071c03696c0a6a78d60 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 22:34:29 +0100 Subject: [PATCH 14/20] revert README changes --- examples/vue-pinia/README.md | 10 --------- packages/vike-vue-pinia/README.md | 37 ------------------------------- 2 files changed, 47 deletions(-) diff --git a/examples/vue-pinia/README.md b/examples/vue-pinia/README.md index 3579ed95..1b09f542 100644 --- a/examples/vue-pinia/README.md +++ b/examples/vue-pinia/README.md @@ -1,15 +1,5 @@ Example of using [Pinia](https://pinia.vuejs.org) with the `vike-vue-pinia` extension. -This example demonstrates: -- 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 -- 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 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. diff --git a/packages/vike-vue-pinia/README.md b/packages/vike-vue-pinia/README.md index 525e2713..aa8e7ba1 100644 --- a/packages/vike-vue-pinia/README.md +++ b/packages/vike-vue-pinia/README.md @@ -8,7 +8,6 @@ Integrates [Pinia](https://pinia.vuejs.org) into your [`vike-vue`](https://vike. [Installation](#installation) [Example](#example) -[Pinia plugins](#pinia-plugins) [Populate store with `+data`](#populate-store-with-data) [Version history](#version-history) [See also](#see-also) @@ -63,42 +62,6 @@ See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/v
-## Pinia plugins - -To use Pinia plugins such as [`pinia-plugin-persistedstate`](https://prazdevs.github.io/pinia-plugin-persistedstate/), define an `onCreatePinia()` hook. - -For client-only plugins (e.g. plugins that use `localStorage`), use the `.client.ts` suffix: - -```js -// pages/+onCreatePinia.client.js - -import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' - -export function onCreatePinia(pageContext) { - pageContext.pinia.use(piniaPluginPersistedstate) -} -``` - -Alternatively, you can use an environment check: - -```js -// pages/+onCreatePinia.js - -import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' - -export function onCreatePinia(pageContext) { - if (pageContext.isClientSide) { - pageContext.pinia.use(piniaPluginPersistedstate) - } -} -``` - -The `onCreatePinia()` hook is called after creating the Pinia instance but before the SSR state is applied, allowing persisted state (e.g. from `localStorage`) to be properly merged with server state. - -See [examples/vue-pinia](https://github.com/vikejs/vike-vue/tree/main/examples/vue-pinia) for a working example. - -
- ## Populate store with `+data` To populate your store with data fetched via the [`+data`](https://vike.dev/data) hook, use [`+onData`](https://vike.dev/onData) and [`pageContext.data`](https://vike.dev/pageContext#data). From 45bcb0b2a69129eca3ef7f0e9bee2911fdbe0942 Mon Sep 17 00:00:00 2001 From: Romuald Brillout Date: Mon, 8 Dec 2025 22:36:17 +0100 Subject: [PATCH 15/20] restore counter-3 --- examples/vue-pinia/pages/about/+Page.vue | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/vue-pinia/pages/about/+Page.vue b/examples/vue-pinia/pages/about/+Page.vue index fe737309..c21eb11b 100644 --- a/examples/vue-pinia/pages/about/+Page.vue +++ b/examples/vue-pinia/pages/about/+Page.vue @@ -1,12 +1,15 @@