Lazy component inside `UTabs` are never lazyloaded

[Tragio]

Environment

• Operating System: Darwin
• Node Version: v20.10.0
• Nuxt Version: 3.12.2
• CLI Version: 3.12.0
• Nitro Version: 2.9.6
• Package Manager: [email protected]
• Builder: -
• User Config: telemetry, ssr, app, sourcemap, colorMode, modules, formkit, pwa, runtimeConfig, security, css, vite, devServer
• Runtime Modules: @pinia/[email protected], @vite-pwa/[email protected], @vueuse/[email protected], @formkit/[email protected], @nuxt/[email protected], [email protected]
• Build Modules: -

Version

2.17.0

Reproduction

https://stackblitz.com/edit/nuxt-ui-qs48un?file=app.vue

Description

When using the UTabs component, a Lazy component is never lazyloaded.

In the reproduction, you can see that the API call from Tab 2 is always called. However, If you put those Lazy components outside the UTabs and change it to selectedTab it works properly, as you can't see the API call.

<script setup>
const route = useRoute();
const router = useRouter();

const items = [
  {
    key: 'tab1',
    label: 'Tab1',
    content: 'This is the content shown for Tab1',
  },
  {
    key: 'tab2',

    label: 'Tab2',
    content: 'And, this is the content for Tab2',
  },
];

const selectedTab = computed({
  get() {
    const index = items.findIndex((item) => item.key === route.query.tab);
    if (index === -1) {
      return 0;
    }

    return index;
  },
  set(value) {
    router.replace({
      query: { tab: items[value].key },
    });
  },
});
</script>

<template>
  <UTabs v-model="selectedTab" :items="items">
    <template #item="{ item }">
      <LazyFirstComponent v-if="item.key === 'tab1'" />
      <LazyApiComponent v-if="item.key === 'tab2'" />
    </template>
  </UTabs>
</template>

Additional context

No response

Logs

No response

[noook]

Indeed, I can see that. Perhaps would the unmount prop handle your usecase ? This prop is meant for components not to be mounted unless the current tab is the appropriate one. This improves performance when using heavy components in each tab, and will re-run the request everytime you switch to this tab

[Tragio]

Hi @noook 👋 ahhh yes, it solved, I never saw that prop 😅 perhaps we could improve the docs for that use-case?

[noook]

It's quite recent, I'm actually the one that introduced it for a very similar usecase!

If you'd like to submit a PR to improve the documentation feel free! Otherwise I can do it

[Tragio]

Ahhh okido, so if you implemented it then you're more suitable than I for it 😋 however, if you don't have time I can do it. I'll keep the issue open until the upcoming PR is created and merged.

Thank you very much for your support 🙏