Vue 3 Dynamic Components for Tabbed Interfaces

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

    <div class="tab-content">
      <component :is="currentTab" message="Hello from Parent!"></component>
    </div>
  </div>
</template>

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

const currentTab = ref(HomeTab); // Initial component

const tabs = [
  { name: 'Home', component: HomeTab },
  { name: 'Profile', component: ProfileTab },
  { name: 'Settings', component: SettingsTab },
];
</script>

<style scoped>
.tab-container {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: 20px auto;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.tab-nav {
  display: flex;
  border-bottom: 1px solid #eee;
}
.tab-nav button {
  flex: 1;
  padding: 15px 20px;
  border: none;
  background-color: #f9f9f9;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease;
}
.tab-nav button:hover {
  background-color: #e9e9e9;
}
.tab-nav button.active {
  background-color: #fff;
  border-bottom: 2px solid #007bff;
  color: #007bff;
}
.tab-content {
  padding: 20px;
}
</style>

<!-- components/HomeTab.vue -->
<!-- <template>
  <div>
    <h3>Home Tab Content</h3>
    <p>Welcome to the home page! {{ message }}</p>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps(['message']);
</script> -->

<!-- components/ProfileTab.vue -->
<!-- <template>
  <div>
    <h3>Profile Tab Content</h3>
    <p>Manage your profile here. {{ message }}</p>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps(['message']);
</script> -->

<!-- components/SettingsTab.vue -->
<!-- <template>
  <div>
    <h3>Settings Tab Content</h3>
    <p>Adjust your settings. {{ message }}</p>
  </div>
</template>
<script setup>
import { defineProps } from 'vue';
defineProps(['message']);
</script> -->