feat: new setting +vue (vue.keepAlive, fix vikejs/vike#3433)

[brillout]

Description

New cumulative setting +vue for Vue integration options — the Vue counterpart of vike-react's +react setting.

Its first option is vue.keepAlive (boolean | KeepAliveProps): it preserves page component instances — and thus their state — across client-side navigation, by wrapping the <Page> component with Vue's built-in <KeepAlive> component.

Fixes the use case raised in https://github.com/orgs/vikejs/discussions/3433.

Why the runtime (and not userland)?

Wrapping <slot /> with <KeepAlive> inside a +Layout (or a hypothetical +Wrapper) component cannot work: <KeepAlive> only caches its direct child component, whereas slot content is rendered as a Fragment which <KeepAlive> cannot cache. So the only place <KeepAlive> can be applied is where vike-vue renders the routed <Page> component — i.e. in createVueApp().

Usage

// pages/+vue.ts
export default {
  keepAlive: true, // or <KeepAlive> props, e.g. { include, exclude, max }
} satisfies Config['vue']

The setting is cumulative and can also be a function of pageContext (like +react); more specific values override less specific ones.

Changes

• types/Config.ts: new vue setting type (VueSetting | ((pageContext) => VueSetting | undefined)) with keepAlive?: boolean | KeepAliveProps.
• +config.ts: register the vue setting (env: { server: true, client: true }, cumulative: true).
• integration/resolveVueSetting.ts: merge the cumulative values (vike orders them most-specific first, so we merge in reverse for correct precedence) and call function values with pageContext.
• createVueApp.ts: conditionally wrap the routed <Page> component with <KeepAlive> (reactive across navigation, like Layout). <KeepAlive> is SSR-compatible — on the server it simply renders its child.
• examples/full: new /keep-alive/first + /keep-alive/second pages with a shared +vue.ts (keepAlive: true), and an e2e test asserting that a counter's state survives a round-trip client-side navigation.

Testing

• pnpm run build ✅
• pnpm exec test-e2e examples/full ✅ (dev + preview, including the new keepAlive test)
• pnpm run test:types ✅
• pnpm run format:check ✅

Documentation PR: vikejs/vike#3434 (docs for https://vike.dev/vue-setting)

🤖 Generated with Claude Code

https://claude.ai/code/session_01MU13ncNmLi5rz2xySmm5rZ