I want to learn more about Nuxt 3 and got a basic template to test keepalive:

problem

My test.vue-component starts everytime with a falsy value, which triggers the setTimeout.

expectations

I expected the timeout method to be executed only once and nuxt will cache the values after a route change. So the timeout method should not start again.

folder structure

• /components
  • test.vue
• /layouts
  • default.vue
• /pages
  • /item
    • [id].vue
  • index.vue

approach

// index.vue
<script setup>
definePageMeta({
  keepalive: true
})
</script>

<template>
  <div>
    <h1>Home</h1>
    <NuxtLink to="/item/1">to item 1</NuxtLink>
    <hr>
    <Test /> /* <- keep me alive after route changes */
  </div>
</template>

// [id].vue
// nothing here, just to navigate back to the root page

<template>
  <div>
    <h1>Item page</h1>
    <NuxtLink to="/">back to home</NuxtLink>
  </div>
</template>

// test.vue
<script setup>
definePageMeta({
  keepalive: true
})

const showText = $ref(false)
onMounted(() => {
  if (showText) return
  setTimeout(() => {
    showText= true
  }, 1000);
})
</script>

<template>
  <div>
    <p>test:</p>
    <div v-if="showText">  /* is always false after route changes */
      <p>hello world, should be alive?!</p>
    </div>
  </div>
</template>

The documentation says:

Nuxt will automatically wrap your page in the Vue component if you set keepalive: true in your definePageMeta. [...]

questions

• How would keepalive work in my example?

• Do I have to declare the keepalive both in the parent and the child component?

• [Optional]: What should I do, to keep the parent (index.vue) alive?