Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

vue3 keep-alive not working

See original GitHub issue

What happened?

I tried two ways:


<template>
  <!-- <router-view /> -->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive"></component>
    </keep-alive>
    <component :is="Component" v-if="!$route.meta.keepAlive" :key="$route.name"></component>
  </router-view>
</template>

AND


<template>
  <!-- <router-view /> -->
  <router-view v-slot="{ Component }">
    <keep-alive include="xxx,bbb">
      <component :is="Component" :key="$route.name"></component>
    </keep-alive>
  </router-view>
</template>

keep alive not working, created/unmounted is always called. What’s wrong with it?

What did you expect to happen?

The keepalive component should be cached and not refreshed

Reproduction URL

Use keep-alive by document

How to reproduce?

Use keep-alive by document

Flavour

Quasar CLI with Webpack (@quasar/cli | @quasar/app-webpack)

Areas

Quasar CLI Commands/Configuration (@quasar/cli | @quasar/app-webpack | @quasar/app-vite)

Platforms/Browsers

No response

Quasar info output

Dev mode.......... spa
 Pkg quasar........ v2.6.6
 Pkg @quasar/app... v3.3.3
 Pkg webpack....... v5
 Debugging......... enabled

 Configured browser support (>= 86.50% of global marketshare):
 · Chrome for Android >= 100
 · Firefox for Android >= 99
 · Android >= 100
 · Chrome >= 91
 · Edge >= 97
 · Firefox >= 90
 · iOS >= 12.2-12.5
 · Opera >= 79
 · Safari >= 13.1

Relevant log output

No response

Additional context

No response

Issue Analytics

State:
Created a year ago
Comments:8 (1 by maintainers)

Top GitHub Comments

1reaction

rstoenescucommented, Apr 22, 2022

Hi,

Don’t think there’s something that needs configured for this to work. However, all things that can be configured are here.

Copy-pasting stuff from the “net” without understanding them is not really a good way to make progress. This ticket should at best be a post in our forum requesting help from the community.

But bottom line, this has nothing to do with Quasar but with Vue exclusively (if even). The right approach to report a Vue ticket is to their repo, not ours.

Thanks.

0reactions

pdanpdancommented, Dec 1, 2022

@cozumel424 please make a codepen