How to exclude specific component from caching Using Nuxt.js keep-alive props?

user_16303533 0
Viewed 1998

I have trouble with Nuxt.js keep-alive prop, I am trying to cache all components except one, and load dynamic data again. But all components are cached, I can't figure out what am I doing wrong. Is this the correct way to use keep-alive in Nuxt.js?

Default layout

<template>
  <div>
    <Nuxt keep-alive :keep-alive-props="{exclude: ['basket']}" />
  </div>
</template>

Inside basket

<template>
  <div>
    <h1>basket</h1>
    {{items}}
  </div>
</template>

<script>
export default {       
  async fetch() {
    let resp = await this.$axios.$get('api/items')
    this.items = resp.data
   },    
  fetchOnServer:false,
}
</script>

Vue devtools

enter image description here

nuxt.js vue.js
1 Answers

keep-alive only caches page components, so I'm assuming basket is a page.

The component name for pages is the relative path to the page. Assuming this directory structure:

pages/
 - index.vue
 - basket.vue

...the name for the basket page would be "pages/basket.vue":

<Nuxt keep-alive :keep-alive-props="{exclude: ['pages/basket.vue']}" />

demo

user_62771510
Related