Question about the recommended way to achieve KeepAlive-like page persistence in vike-vue

[daief]

Context

I am trying to preserve routed page instances across client-side navigations in a vike-vue app.

My first intuition was to use Vue's KeepAlive inside +Layout.vue, for example:

<template>
  <AppLayout>
    <KeepAlive>
      <slot />
    </KeepAlive>
  </AppLayout>
</template>

In practice, what I observe is:

• Layout is reused across navigations
• routed Page components are still recreated on route change
• wrapping <slot /> with KeepAlive in Layout does not seem to preserve page instances

Minimal observation

From reading the runtime, it looks like this may be related to how Page and Layout are composed in createVueApp().

Source path:

src/integration/createVueApp.ts

Current logic:

const entryComponentRef = shallowRef(pageContext.config[entryComponentName])
const layoutRef = shallowRef(pageContext.config.Layout || [])

const EntryComponent = () => h(entryComponentRef.value)

RootComponent = () => {
  let RootComp = EntryComponent
  layoutRef.value.forEach((layout) => {
    const Comp = RootComp
    RootComp = () => h(layout, null, Comp)
  })
  return RootComp()
}

Because the page is wrapped by the Vike runtime before being exposed through Layout, KeepAlive placed around the layout slot does not seem to receive a stable direct page vnode/component in the way Vue normally expects for caching.

Local experiment

I also tried a local runtime experiment that wraps the routed Page directly at the Vike runtime level:

Source path:

src/integration/createVueApp.ts

const EntryComponent = () =>
  h(KeepAlive, null, {
    default: () => h(entryComponentRef.value)
  })

With this change:

• page instances are preserved across navigations
• the behavior becomes closer to what I expected from KeepAlive

Main question

If the goal is to achieve KeepAlive-like behavior for routed pages in vike-vue, what is the recommended approach?

More specifically:

1. Is wrapping <slot /> with Vue KeepAlive inside Layout expected to work for routed pages?
2. If not, what is the officially recommended way to preserve page instances across client-side navigations?
3. Is this something that should be solved at the app level, or is there already a framework-supported pattern for it?

Why I am asking

I found a local runtime patch that changes the behavior, but I do not want to assume that patching the runtime is the right direction.

Before taking any implementation approach, I would like to understand what the maintainers consider the correct or recommended solution for achieving KeepAlive-style page persistence in vike-vue.

[brillout]

https://vike.dev/vue-setting released in vike-vue@0.9.13.

[daief]

That was incredibly fast. Thanks a lot for the quick support and for adding this so quickly.

[brillout]

👍 By the way, we're collecting testimonials — contribution welcome to share 1-2 sentences about why you chose Vike.

[daief]

Sure.

I mainly use Vike for SSG projects right now. Compared to Nuxt, it feels lighter and easier to pick up. I also really like how the coding hints and documentation complement each other, so it’s easy to jump from the code to the docs whenever I want to check implementation details.