In my nuxt 3 project, I am utilizing the element plus library to create a page with 3 tabs. Each tab's content is divided into its own component, and I have set conditions to initially render only the first tab component. However, when switching to the 2nd or 3rd tab for the first time, there is a slight delay in loading the component.
Once all 3 components have loaded, each tab's content loads smoothly without any delays. Below is a snippet of the code:
<template>
<el-tabs v-model="activeTabName" @tab-click="handleClick">
<el-tab-pane label="Tab 1" name="tab1">
<LazyTab1
v-if="activeTabName == 'tab1'"
:form-data="formData"
:loader="loader"
@on-submit="submitForm"
/>
</el-tab-pane>
<el-tab-pane label="Tab 2" name="tab2">
<LazyTab2
v-if="activeTabName == 'tab2'"
:form-data="formData"
:loader="loader"
@submit-form="submitForm"
/>
</el-tab-pane>
<el-tab-pane label="Tab 3" name="tab3">
<LazyTab3
v-if="activeTabName == 'tab3'"
:form-data="formData"
:loader="loader"
@on-submit="submitForm"
/>
</el-tab-pane>
</el-tabs>
</template>
<script setup>
// Your script setup here
</script>
Although each tab should load one at a time due to the conditional rendering, the initial switch between tabs causes an issue on the first load only. Any suggestions on how to resolve this would be greatly appreciated. Let me know if additional information is needed. Thank you for your assistance.