Nuxt.js: keep-alive - Ability to cache page components on the client

[nassimbenkirane]

Hi there,

I have been playing around with the framework and one thing that bugs me is that you can cache pages on the server, but not on the client.

It would be great to be able to use keep-alive (https://vuejs.org/v2/guide/components.html#keep-alive) on top of the router-views that power the pages (as in https://router.vuejs.org/en/api/router-view.html#behavior)

For now, when I wrap the router-view with a keep-alive tag, (https://github.com/nuxt/nuxt.js/blob/master/lib/app/components/nuxt-child.js#L57), it kind of works : the components are properly cached. However, the component's data function is called anyway even if it doesn't reflect on the drawn component.

Do you have any plans on making it possible to use keep-alive ?

Anyway, thanks for Nuxt, and keep up the good work, it's amazing :)

_{This question is available on Nuxt.js community (#c72)}

[nassimbenkirane]

It might be related to #85

[Atinux]

Hi @nassimbenkirane

Actually it's called every time for making the dynamic component easy to develop. Furthermore, I think it would be more explicit to define a cacheData option in the page component directly.

I will take a deeper look later, but for the moment, you can do it manually in the data method itself, take a look at this example: https://gomix.com/#!/project/nuxt-cache-data

Live demo: https://nuxt-cache-data.gomix.me/about

1. Click on Home page -> the api call is made and the data stored in cachedData
2. Click on About page
3. Click on Home page -> the api call will not be made

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.