Vue 3 Dynamic Component with is

The <component :is="..."> pattern lets you render different components based on runtime state — useful for tabs, wizards, and plugin-based UIs.

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

const tabs = [
  { label: 'Home',     component: HomeTab },
  { label: 'Profile',  component: ProfileTab },
  { label: 'Settings', component: SettingsTab },
]

// shallowRef avoids deep reactivity on component objects
const current = shallowRef(HomeTab)
</script>

<template>
  <nav>
    <button
      v-for="tab in tabs"
      :key="tab.label"
      :class="{ active: current === tab.component }"
      @click="current = tab.component"
    >
      {{ tab.label }}
    </button>
  </nav>

  <!-- Wrap in KeepAlive to preserve state between switches -->
  <KeepAlive>
    <component :is="current" />
  </KeepAlive>
</template>