KeepAlive with q-tab-panels

[b0ot]

Me and a few of the people in the Vue & Quasar discord have been trying to figure out why my component is not correctly being kept alive.

Eventually found out that there is special attention needed when using q-tab-panels from the docs:

Please take notice of the Boolean keep-alive prop for QTabPanels, if you need this behavior. Do NOT use Vue’s native <keep-alive> component over QTabPanel.
Should you need the keep-alive-include or keep-alive-exclude props then the QTabPanel names must be valid Vue component names (no spaces allowed, don’t start with a number etc).

This warning is very hard to decipher but after quite a bit of testing and discussion we came to the conclusion:

• q-tabs-panels should have 'keep-alive' prop
• q-tabs-panel should have keep-alive-include="component name"
• value for tabs must be the same string as the component name (i.e. q-tab should be called 'BladePlayerHLS' because I'm trying to keep that component alive).

Tried the following:

<template>
  <div class="full-width full-height">
    <q-tab-panels
      v-model="tab"
      animated
      keep-alive
      keep-alive-include="BladePlayerHLS"
    >
      <q-tab-panel name="BladePlayerHLS">
        <BladePlayerHLS />
      </q-tab-panel>

      <q-tab-panel name="mapview">
        <div class="text-h6">Alarms</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>

      <q-tab-panel name="movies">
        <div class="text-h6">Movies</div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit.
      </q-tab-panel>
    </q-tab-panels>

    <q-separator />

    <q-tabs v-model="tab" dense align="justify" narrow-indicator>
      <q-tab name="BladePlayerHLS" label="Video" />
      <q-tab name="mapview" label="Map" />
      <q-tab name="shaka" label="Movies" />
    </q-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import BladePlayerHLS from "./BladePlayerShaka.vue";

const isActive = ref(false);

const tab = ref("BladePlayerHLS");
</script>

However when I exit the original video tab and go back I get the following error:

[pdanpdan]

If you want to use keep-alive-(in|ex)clude then the names should have a fost that would be valid if used as component names :) - so 'test', 'videos' is good and 'videos list', '2pac' is wrong
It does not need (and maybe even create problems) to be a real component name.
Also if no keep-alive-(in|ex)clude is specified all panels are kept alive.

About your error:

• try first to change the name of the panel to 'videos' (to exclude a problem with keep-alive-include name)
• check if the component works as expected when kept alive (try it in isolation with <keep-alive><BladePlayerHLS v-if="isActive" /></keep-alive> and toggle isActive)
• I would not mix kebab-case and PascalCase component names (but I'm not sure BladePlayerHLS is nice in kebab)

You can see an example here: https://github.com/quasarframework/quasar/blob/dev/ui/dev/src/pages/web-tests/panel-keep-alive.vue

[b0ot]

Thank you for the quick response!

I tried to simplify the example based on your feedback.
I renamed the q-tab-panel to blade but I'm still getting the same weird error.

https://codesandbox.io/p/sandbox/quasar-shaka-e18x2k

To run you need to:
cd quasar-project
quasar dev

Test is pages/BladeTabs.vue (default route)

[pdanpdan]

There seems to be something inside the component.
I tested it without panels (https://codesandbox.io/p/sandbox/quasar-shaka-forked-2zw44c?file=%2Fquasar-project%2Fsrc%2Fpages%2FBladeTabs.vue%3A6%2C21) and it generates errors also

[b0ot]

Odd. I also tried changing the component out and I'm getting the same type of error. Any idea what might be the next step for debugging? I'm not sure where to check next.
Original:
import BladePlayerHLS from "./BladePlayerShaka.vue";
// a Shaka based player.
New:
import BladePlayerHLS from "./BladePlayer2.vue";
// A hls.js based player

[b0ot]

Are the mounted/unmounted hooks supposed to still run when you keep a component alive?

[pdanpdan]

Only once
https://vuejs.org/guide/built-ins/keep-alive.html

[b0ot]

Well it appears q-tabs aren't going to work with my components. I have a working solution utilizing v-show, however for some reason on Android, I get a big lag when switching showing components.

My understanding of v-show:
When using v-show to show and hide elements in Vue 3, there should not be a significant performance issue on a mobile phone by default. v-show works by toggling the display CSS property on the element, so it does not remove the element from the DOM. This means that the element is still present in the DOM tree, but its visibility is controlled by the display property.

What could cause that type of issue?

Are there alternative approaches other than v-show I could use as an alternative to ?