NuxtN
Nuxt3mo ago
14 replies
Markeem

How to use KeepAlive properly

I have a couple pages that need to be kept alive. Even though I figured it out, I still wonder if thats the way it is supposed to be.


I have the following pages overview/invoices.vue ( name prop = Overview-Invoices) and overview/items.vue ( name prop = Overview-Items).

The only way it works reliably currently with the following code within my app.vue file:


<NuxtLayout class="font-inter relative">  
     
        <NuxtPage :keepalive="{include: ['invoices', 'items']}" />
     
</NuxtLayout>


It does not work using the name property defined in definePageMeta ( Overview-Invoices and Overview-Items).

It also doesnt really work when setting keepalive=true within the definePageMeta function for both pages. The Navigation becomes really buggy doing this.


Could someone explain to me how it is supposed to work exactly ? Because the current way seems weird to me. Why is the name prop not accepted and also there could be an issue with duplicate naming due to the folder routing ?
Was this page helpful?