How to force an initial render on q-tab-panel?

[baaskoen]

When I'm using q-tabs with q-tab-panels (with the keep-alive prop), each q-tab will start to mount only when the tab will be active for the first time.

However, sometimes I have components inside tabs that do essential things in their created or mounted hooks. When the end user never clicks on a tab, these hooks will never be called.

In other Vue Component libraries/frameworks there is usually a way to provide each tab with a prop that describes it should render immediately. For example Ant Design Vue allows a forceRender boolean prop in the TabPane component.

And Vuetify has the eager prop:
https://vuetifyjs.com/en/api/v-tab-item/#props

Is there any way I can achieve this in Quasar?

[Nymphxyz]

3 years no answer ?

[baaskoen]

there is no logic in rendering something that is not actually rendered. if user won't activate the tab there is no point in rendering its content. you can always fetch any external data in the background or simply in the parent and pass it as props to the components inside. plenty of solutions. this is a non-issue.

Saying it's a non-issue is kind of condescending, isn't it? You're basically saying that all popular frameworks implemented this prop for no reason? Ofcourse there are (better) ways to tackle a problem, but there are many cases where you might want/need an initial render for UX reasons.

[Aymkdn]

I'm trying to do exactly the same thing. Any solution?

[Aymkdn]

I spent hours trying to figure it out. So finally I replaced the below:

<q-tab-panels keep-alive animated v-model="proxyTabSelected">
  <q-tab-panel :name="'tab-'+tab.id" :key="'tab-item-'+tab.id" v-for="tab in app.tabsVisible">

with:

<div class="q-tab-panels q-panel-parent">
  <div class="q-panel scroll" role="tabpanel">
    <div class="q-tab-panel" :data-direction="slideDirection" role="tabpanel" v-for="tab in app.tabsVisible" :key="'tab-item-'+tab.id" v-show="proxyTabSelected === 'tab-' + tab.id">
      <div class="fieldset" :ref="'fieldset_'+tab.id" v-if="!lazy || (lazy && tabsIdAlreadyLoaded.has(tab.id))">

:data-direction="slideDirection" permits to put either left-to-right or right-to-left to animate the change of tab:

computed: {
    proxyTabSelected:{
      get () {
        return this.app.tabSelected;
      },
      set (val) {
        this.slideDirection = (val > this.proxyTabSelected ? "right-to-left" : "left-to-right");
        document.startViewTransition(() => {
          this.$emit('update:tab-selected', val);
        });
      }
    }
}

Below is the CSS animation slide effect:

.q-tab-panel[data-direction="right-to-left"] {
  view-transition-name: q-tab-panel-right-to-left;
}
::view-transition-old(q-tab-panel-right-to-left) {
  animation: 150ms ease-out both slide-out-right-to-left;
}
::view-transition-new(q-tab-panel-right-to-left) {
  animation: 150ms ease-out both slide-in-right-to-left;
}
@keyframes slide-out-right-to-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes slide-in-right-to-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

.q-tab-panel[data-direction="left-to-right"] {
  view-transition-name: q-tab-panel-left-to-right;
}
::view-transition-old(q-tab-panel-left-to-right) {
  animation: 150ms ease-out both slide-out-left-to-right;
}
::view-transition-new(q-tab-panel-left-to-right) {
  animation: 150ms ease-out both slide-in-left-to-right;
}
@keyframes slide-out-left-to-right {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}

@keyframes slide-in-left-to-right {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

And I added a lazy option that will either load my tabs content immediately, or when I click on the tab.