Build Dynamic Tabbed Interfaces with Vue 3 Components

// src/components/TabA.vue
<template>
  <div class="tab-content">
    <h2>Content for Tab A</h2>
    <p>This is the first tab's information.</p>
  </div>
</template>

// src/components/TabB.vue
<template>
  <div class="tab-content">
    <h2>Content for Tab B</h2>
    <p>This is the second tab's information.</p>
  </div>
</template>

// src/App.vue
<template>
  <div class="container">
    <nav class="tabs">
      <button @click="currentTab = 'TabA'" :class="{ active: currentTab === 'TabA' }">Tab A</button>
      <button @click="currentTab = 'TabB'" :class="{ active: currentTab === 'TabB' }">Tab B</button>
    </nav>

    <div class="tab-wrapper">
      <component :is="currentTabComponent"></component>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import TabA from './components/TabA.vue';
import TabB from './components/TabB.vue';

const currentTab = ref('TabA'); // Initial tab

const tabs = {
  TabA,
  TabB
};

const currentTabComponent = computed(() => tabs[currentTab.value]);
</script>

<style>
.tabs button {
  padding: 10px 15px;
  margin-right: 5px;
  border: 1px solid #ccc;
  background: #f0f0f0;
  cursor: pointer;
}
.tabs button.active {
  background: #007bff;
  color: white;
  border-color: #007bff;
}
.tab-wrapper {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #eee;
  border-radius: 5px;
}
</style>