keepalive `include`/`exclude` props don't work with `<NuxtPage>`

Environment

---

• Operating System: Windows_NT
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.11
• Nitro Version: 0.5.4
• Package Manager: npm@8.11.0
• Builder: vite
• User Config: -
• Runtime Modules: -
• Build Modules: -

---

Reproduction

https://stackblitz.com/edit/github-xnrjjn?file=pages%2Findex.vue,pages%2Fnotkeptalive.vue

Describe the bug

App has 2 pages, one page is set to be kept alive with definePageMeta({ keepalive: true }); the other one is not.

Changing some value in the first page, is not kept if you navigate away from it and if you come back. Also, there is a weird display bug, as if a new mounted component of the page was added under the first one in the page before the first one being added. It make the page flicker.

If you put the same page meta in the second one (by removing the comment is the reproduction link), now it works, but the two pages are now kept alive and this is not what I want.

In base vue3, I could do something like that :

<router-view v-slot="{ Component }">
      <keep-alive include="index">
        <component :is="Component" />
      </keep-alive>
    </router-view>

Additional context

No response

Logs

No response

[danielroe]

Yes, this is definitely on the roadmap and needs to be fixed.

[Ilmion]

Feature implemented here: #7492.

You would do something like:

<NuxtPage :keepalive="{ include: 'index' }" />

@danielroe It does not work. I have inspected it with chrome vue dev tool and here is the problem. Under the KeepAlive there is a Anonymous element created around the Index element and because is it not exactly under the KeepAlive the include does not work. When the keepalive is setup globaly, it is the Anonymous object that are kept alive, not the one from the ./pages.

Two joint picture from the Chrome dev tool. With the include in the, ie <NuxtPage :keepalive="{ include : 'index' }"> With the keepalive set globaly, you can see another Anonymous under the KeepAlive

This bug isn’t closed IMHO.