nuxt: keepalive `include`/`exclude` props don't work with ``

I tried it out and found that the route-provider component is indeed preventing the keep-alive from matching components by name, which is causing the functionality to fail. I’ve come up with two possible solutions:

1. Dynamically change the name of the route-provider component. I think it might be reasonable to change the component name to something based on the included page name, such as IndexProvider. However, changing the component name at runtime may not be ideal, but given the current issue, it could serve as a temporary solution.

2. Add support for Vue 3 keep-alive to match components based on a key. This solution may require intervention from the Vue team. However, it seems that this issue originated from the design of Nuxt, and waiting for Vue to address it might take some time, which could be a loss for Nuxt. I’ve attempted to use some Hacking methods to add components to the Cache Map of the keep-alive component but haven’t succeeded.

3. Is it possible to inject the provider into the user’s page in some way, automatically wrapping the user’s code, and ensuring that keep-alive uses the page component for matching (I haven’t tried this, and I’m not sure if it’s feasible)?

In summary, I hope that Nuxt can provide some temporary solutions for this issue (assuming that the API won’t change) and include warnings or notifications about this problem in the documentation to help those who are facing similar problems.🌹

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

In the latest version v3.3.1, this bug still exists.

@Maxbsy @kr2748 It has been fixed and should be available in 3.8.2 soon.

Hey everyone! Just wanted to provide you with an update that the team is still prioritizing this as an issue to fix. Part of the complication with this issue is that it is connected to a bug downstream that’s happening within the Vue library itself. While we could certainly patch Nuxt with a hack or workaround, this would be less than ideal.

Nonetheless, progress is being made and we’ll keep y’all posted once we have some more updates 🙂

Feature implemented here: nuxt/framework#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.

@danielroe any plans to fix this in the near future?

I did some testing and it looks like the reason for this problem is that the direct child of KeepAlive is an anonymous component (see last comment on nuxt/nuxt.js#14609), that has no name and for this reason Vue include/exclude does not work.

The anonymous component also is the reason for nuxt/nuxt.js#15573. As the component type below KeepAlive is always the same Vue unmounts the wrong component, resulting in a strange state. This causes KeepAlive to be unsafe to use in Nuxt at the moment, as components/composables that register onUnmounted get this hook even though the component is not unmounted.

In my test, I changed the behavior so that each pageKey create its own wrapper component https://github.com/stenet/nuxt-framework-keep-alive/blob/main/packages/nuxt/src/pages/runtime/page.ts#L88. This way, these two problems were fixed. But this is probably not the best solution, since the map used grows quite fast.

I would like to know the latest progress on this issue? It seems that the latest version of nuxt still hasn’t been resolved

Hello, I’d like to ask, are there any updates from the team? Thanks in advance.

@freezyh Please stop commenting. I understand you’re frustrated, but please be considerate of others. Everyone subscribed to this issue will receive a notification, and you are not helping solve the issue.

This is definitely a bug we want to fix, as you can see by the fact that it is labeled p4-important.

Is there any workaround for this?

@AndrewBogdanovTSS Indeed, I think that at least for now, some temporary solutions can be used to address this issue, or the problem can be highlighted in the Nuxt documentation.

I have also encountered this issue. You can first use definePageMeta({ keepalive: true, })To solve this problem, add pages that require caching and add them to both the to and form pages before using them

Oct 21, 2022 -> Nov 28, 2022 -> Jul 17， 2023

is there any hope to fix this p4-important bug?

same too, it is very big bug, can not control page keepalive, only all use, or all no

@danielroe any updates on this one? Thanks

I hope this gets fixed sometime. Just checked with newest release v3.1.1 - bug still remains (same reason described by Ilmion).

Workaround: Use <RouterView /> instead <NuxtPage />

If you use this solution you also have to manully import useRoute everytime: import { useRoute } from 'vue-router';

Because the auto-imported useRoute of nuxt will be wrong

How can nuxt be stable with major bugs like this 😢 I don’t want to be rude (nuxt is great!) - just questioning if I should use nuxt3 for any upcoming project.

I try it on NUXT 3.8.2, for page keepalive and it work.

1. set the name for the page you want to keepalive, not the name in definePageMeta but in the options api.
2. set <NuxtPage :keepalive="{include: 'KeepAliveComponentName'}" /> in app.vue.

note: you can also control the key by setting the key in definePageMeta

demo: https://stackblitz.com/edit/nuxt-starter-m7k9hv?file=pages%2Falive.vue

Dynamically changing the include attribute will invalidate the cache. Who knows what happened html <NuxtPage :page-key="(route) => route.meta.id" :keepalive="{ include: cacheIncludes, max: 10 }" />

I create a example,what should i do how to use keepalive in the a page. example

I’d like to ask when the update will be available.

With the broken exclude feature the keep-alive feature at all can be problematic to use: If for example you want to exclude specific routes for security reasons (e.g. you don’t want to cache sensitive data, like a account page etc.), this is not possible. Its a trade off between disabling keep-alive at all or deal with the risk. 😕

Don’t get me wrong, it’s nice to get new features. But when this fundamental feature do not work, it’s hard to use nuxt without hesitation. Hopefully this will be fixed soon. 🙏

I have made a series of attempts again, and currently this solution can achieve the goal I want.

1. Configure keepalive as true in nuxt.config.ts.
2. Remove the keepalive props on the <NuxtPage>.
3. Control keepalive only through the keepalive property in definePageMeta.

@danielroe @bencodezen could you please add a reference to the related vue issue here? I tried to find it but I’m not sure which one it is.

Thanks!

It seems that in order to achieve my goal, I have to use middleware to achieve the desired results.

export default defineNuxtRouteMiddleware((to, from) => {
  const keepArray = [
    [ "/","/:column(3d|su|cz|tt|dg|ps|cad)/:id(\\d+).html" ],
    [ "/anli", "/anli/:id.html"],
    [ "/lg", "/lg/:id.html" ]
  ]
  const fromPath = from.fullPath;
  const toPath = to.fullPath;
  const fromMatchedPath = from.matched.length > 0 ? from.matched[0].path : "";
  const toMatchedPath = to.matched.length > 0 ? to.matched[0].path : "";
  const keep = keepArray.find(x=> x.includes(toPath) || x.includes(toMatchedPath));
  if(keep)
  {
    to.meta.keepalive = true;
    if(!(fromPath === toPath ||
        (keep.includes(fromPath) && keep.includes(toMatchedPath)) ||
        (keep.includes(toPath) && keep.includes(fromMatchedPath))
    )){
      from.meta.keepalive = false;
    }
  }
  else {
    from.meta.keepalive = false;
    to.meta.keepalive = false;
  }
}

@danielroe Doing nuxt-page inside layout/default.vue instead of slot like so

Is not working as it should be. It is keeping alive the component but not excluding the excludeThis component. Because nuxt is creating another element in between the keepAlive and excludeThis component

This was working on nuxt2 and nuxt-bridge with this syntax

Is there a way to do this properly? Thank you so much

EDIT: @vcasy I tried RouterView instead and keepAlive completely stopped working

https://github.com/nuxt/nuxt/pull/24024#issuecomment-1870467296

@freezyh use this to add name

<script>
export default {
  name: 'alive1',
};
</script>

I also update the demo in the above comment. hope this help!

thank you very much, I had wright it by typescript defineOptions({ name: 'Alive1' }) It works!

setting app : {keepalive:true} in the nuxt config file and disabling each page i don’t want to keep alive with definePageMeta({ keepalive: false }) works for me ,is there any downside using this method thanks in advance!

Is there any alternative solution for page level keep-alive?

There doesn’t seem to be a clear and effective solution to this problem here, and it doesn’t work. Even if the basic keepalive sets up a separate page, it doesn’t have any effect. I’ve been searching all day without any useful information about this problem.

Yes, that’s a very good summary. We do need the routeProvider to ensure that the route is ‘frozen’ to each suspense fork until suspense resolves. Creating additional copies of RouteProvider with the name matching the route component is probably the best solution to explore (likely with WeakMap to avoid memory leak on client-side).

After some investigation, I’ve noticed that the following rules:

• KeepAlive only looks at the name of the component for include/exclude
• A page component wrapped by NuxtPage, is also wrapped by RouteProvider named RouteProvider

That’s why the include/exclude keepalive options don’t work for NuxtPage.

There are some solutions worth to consider I’ve found so far;

1. Make KeepAlive looks at key in addition to name, in Vue3
2. Give each RouteProvider component a distinct name.
3. Remove RouteProvider and provide _route reactive somehow.

I’ve also came up with a PoC code for 2nd solution, but bit hacky;

--- packages/nuxt/src/pages/runtime/page.ts
+++ packages/nuxt/src/pages/runtime/page.ts
@@ -36,6 +36,8 @@ export default defineComponent({
   },
   setup (props, { attrs }) {
     const nuxtApp = useNuxtApp()
+    const RouteProvider = defineComponent({ ...RouteProviderTemplate })
+
     return () => {
       return h(RouterView, { name: props.name, route: props.route, ...attrs }, {
         default: (routeProps: RouterViewSlotProps) => {
@@ -44,6 +46,8 @@ export default defineComponent({
           const key = generateRouteKey(routeProps, props.pageKey)
           const done = nuxtApp.deferHydration()

+          RouteProvider.name = String(key)
+
           const hasTransition = !!(props.transition ?? routeProps.route.meta.pageTransition ?? defaultPageTransition)
           const transitionProps = hasTransition && _mergeTransitionProps([
             props.transition,
@@ -77,12 +81,11 @@ function _mergeTransitionProps (routeProps: TransitionProps[]): TransitionProps
   return defu(..._props)
 }

-const RouteProvider = defineComponent({
-  name: 'RouteProvider',
+const RouteProviderTemplate = ({
   // TODO: Type props
   // eslint-disable-next-line vue/require-prop-types
   props: ['routeProps', 'pageKey', 'hasTransition'],
-  setup (props) {
+  setup (props: any) {
     // Prevent reactivity when the page will be rerendered in a different suspense fork
     // eslint-disable-next-line vue/no-setup-props-destructure
     const previousKey = props.pageKey

@freezyh use this to add name

<script>
export default {
  name: 'alive1',
};
</script>

I also update the demo in the above comment. hope this help!

@Maxbsy @kr2748 It has been fixed and should be available in 3.8.2 soon.

I can’t wait to try out this version, but its performance seems to be different from what I expected. The lifecycle of the component can be triggered normally, but it also triggers data requests on the page, making me feel like the page is being refreshed. However, if I only use keepalive props like <NuxtPage :keepalive={}>, the data requests on the page will not be triggered. I want to know why this is happening.

Any idea when this will be fixed? Or can you tell us about the fix plan for this problem? Is there any hope of solving this problem in the short term? If not, can you provide a temporary solution?

There is an urgent need for someone to provide a temporary solution so that the problem can be addressed as soon as possible

I know the issue is being worked on by the team of nuxt, but in the mean time, does anyone have a comprehensible guide for a workaround? I don’t tried this but it does not work: https://github.com/nuxt/nuxt/issues/15214#issuecomment-1411650328

I think you need to disable keep-alive completely to for example not run into security issues from cached data that should not be cached. Enable keep-alive back with the excluded routes when this issue is fixed.

When using the router directly, there are issues with the Nuxt ecosystem.

@gyhyfj useAliveList() is a useState of compoables that only returns a list. This instance only controls the pages in the list to be keepalive, but once you visit other pages, all the list pages will be invalid, and you need to reload the list after the second visit to achieve the function, because each time you set to.meta.keepalive will cause all pages to become true. you can try this example.(just only visit /a,/b,/c pages and then visit a other page)

export default defineNuxtRouteMiddleware((to,from)=>{
  if(['/a','/b','/c'].indexOf(to.path)>=0){
         to.meta.keepalive=true;
  }else{
      to.meta.keepalive=false;
  }
});

Thank you. However it doesn’t help in my project because I must keep one special page alive , on whitch a js sandbox and a shadow root couldn’t be destroied after leaving that page. Hope this issue could be resolved by nuxt 🙏

You can use a routing middleware to do this, such as using useState to record a list, and each time you compare whether it is in the list, you can set the page you want to go to as keepalive. This example is not perfect, however, because of a bug built into nuxt3 that causes the keepalives to change for all pages every time you set any to.meta.keepalive to true.

export default defineNuxtRouteMiddleware((to,from)=>{
    if(useAliveList().value.indexOf(to.path)>=0){
        to.meta.keepalive=true;
    }else{
        to.meta.keepalive=false;
    }
    useAliveList('add',to.path);
});

Does anyone know how to put the KeepAlive outside the layout? As NuxtPage, according to the docs, is put inside NuxtLayout, and the keepalive property goes in NuxtPage, it means that the keepalive is cleared each time the layout changes, because the keepalive is inside, not outside, the layout.

Is there any workaround to preserve keepalive while changing layouts?

https://prnt.sc/woqGpakd7zrS

I have the same problem at Nuxt3. Is there an alternative solution?

I have the same issue with <slot /> inside a layout.

Using keepalive in definePageMeta does work. But it’s mostly useful for situations where you have a parent page which wants to define keepalive settings for its children. It will never work for the lone page that wants to be kept alive, because keepalive settings need to remain the same in order for a route to be kept alive.

For this use case, you can pass keep alive props directly to NuxtPage to get the kind of behaviour that you want.

I cannot find an example in the documentation, could you demonstrate ?