Dynamic Component Switching for Efficient Tabbed UIs with KeepAlive

// components/TabsComponent.vue
<template>
  <div class="tabs-container">
    <nav class="tabs-nav">
      <button
        v-for="tab in tabs"
        :key="tab.name"
        @click="activeTab = tab.component"
        :class="{ active: activeTab === tab.component }"
      >
        {{ tab.label }}
      </button>
    </nav>

    <div class="tab-content">
      <KeepAlive>
        <component :is="activeTab"></component>
      </KeepAlive>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import HomeTab from './HomeTab.vue'
import SettingsTab from './SettingsTab.vue'
import ProfileTab from './ProfileTab.vue'

// Define tab data with component references
const tabs = [
  { name: 'home', label: 'Home', component: HomeTab },
  { name: 'settings', label: 'Settings', component: SettingsTab },
  { name: 'profile', label: 'Profile', component: ProfileTab }
]

const activeTab = ref(tabs[0].component) // Initially show HomeTab
</script>

<style scoped>
.tabs-container {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  margin-top: 20px;
}
.tabs-nav button {
  padding: 10px 15px;
  margin-right: 5px;
  border: none;
  background-color: #eee;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  transition: background-color 0.2s ease;
}
.tabs-nav button.active {
  background-color: #007bff;
  color: white;
}
.tab-content {
  border-top: 1px solid #eee;
  padding-top: 15px;
  margin-top: 10px;
}
</style>

// components/HomeTab.vue
<template><div>Welcome to the Home tab!</div></template>
<script setup>console.log('HomeTab created');</script>

// components/SettingsTab.vue
<template><div>Adjust your Settings here.</div></template>
<script setup>console.log('SettingsTab created');</script>

// components/ProfileTab.vue
<template><div>View your Profile information.</div></template>
<script setup>console.log('ProfileTab created');</script>

// App.vue (Parent component usage)
<template>
  <div>
    <h1>My Application</h1>
    <TabsComponent />
  </div>
</template>

<script setup>
import TabsComponent from './components/TabsComponent.vue'
</script>