Vue.js: Dynamic & Async Components

<!-- ✅ Correct version: a single <component> switches them -->
<template>
  <div class="tabs">
    <button 
      v-for="tab in tabs" 
      :key="tab.name"
      :class="{ active: currentTab === tab.name }"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>
    
    <!-- ✅ One <component> tag switches dynamically -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
const { ref, computed, defineAsyncComponent } = Vue

// Synchronous components
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'

// Async component (loaded on demand)
const SettingsTab = defineAsyncComponent(() => import('./tabs/SettingsTab.vue'))

const tabs = [
  { name: 'home', label: 'Home' },
  { name: 'profile', label: 'Profile' },
  { name: 'settings', label: 'Settings' }
]

const currentTab = ref('home')

// Computed: decide which component to render based on currentTab
const currentTabComponent = computed(() => {
  return { home: HomeTab, profile: ProfileTab, settings: SettingsTab }[currentTab.value]
})
</script>

<!-- Form 1: component name string (globally registered) -->
<component :is="'HomeTab'" />

<!-- Form 2: component object (most common) -->
<component :is="HomeTab" />

<!-- Form 3: dynamic computed property -->
<component :is="currentTabComponent" />

<!-- Form 4: async component object -->
<component :is="asyncComponent" />

<!-- Form 5: inline component object -->
<component :is="{ template: '<div>Inline</div>' }" />

<!-- TabContainer.vue -->
<template>
  <div>
    <button 
      v-for="tab in tabs" 
      :key="tab.name"
      @click="currentTab = tab.name"
    >
      {{ tab.label }}
    </button>
    
    <!-- Dynamic component -->
    <component :is="currentTabComponent" />
  </div>
</template>

<script setup>
const { ref, computed } = Vue
import HomeTab from './tabs/HomeTab.vue'
import ProfileTab from './tabs/ProfileTab.vue'
import SettingsTab from './tabs/SettingsTab.vue'

const tabs = [
  { name: 'home', label: 'Home' },
  { name: 'profile', label: 'Profile' },
  { name: 'settings', label: 'Settings' }
]

const currentTab = ref('home')

const currentTabComponent = computed(() => ({
  home: HomeTab,
  profile: ProfileTab,
  settings: SettingsTab
}[currentTab.value]))
</script>

Initially the "Home" button is highlighted green with white text, and the dashed box below reads "Home: 3 todos today, 5 unread messages".
Click "Profile" → the highlight moves, and the whole panel is replaced by "Profile: Alice / admin / signed in for 12 days".
Click "Settings" → it swaps again; all three panels share one `<component>` slot, so the old component is destroyed and the new one is created on every switch.

<script setup>
const { defineAsyncComponent } = Vue
import LoadingSpinner from './LoadingSpinner.vue'

// Async component: ChartEditor's code loads only when it's used
const ChartEditor = defineAsyncComponent({
  // 1. Loader function
  loader: () => import('./ChartEditor.vue'),
  
  // 2. Shown while loading
  loadingComponent: LoadingSpinner,
  
  // 3. Shown if loading fails
  errorComponent: ErrorMessage, // requires import ErrorMessage from './ErrorMessage.vue'
  
  // 4. Load delay (avoids flicker)
  delay: 200
})
</script>

<template>
  <ChartEditor v-if="showEditor" />
</template>

<script setup>
const { defineAsyncComponent } = Vue

// ✅ Shorthand: loader only
const ChartEditor = defineAsyncComponent(() => import('./ChartEditor.vue'))
</script>

Three tab buttons render, with the active one highlighted in green.
The panel below starts on the Home tab and shows a counter button plus a grey hint.
Clicking the counter to 3, switching to Profile, and coming back to Home still shows Count: 3, while the console logs mounted once followed by activated / deactivated instead of destroy events.

[Home] [Profile] [Settings]        ← active tab highlighted in green
┌──────────────────────────────────────┐
│ Home                                 │
│ [Count: 3]                           │
│ Count is kept after a switch (cache) │
└──────────────────────────────────────┘

console:
🏠 Home mounted
🏠 Home activated
🏠 Home deactivated        ← switch to Profile
👤 Profile mounted
👤 Profile activated
👤 Profile deactivated    ← switch back to Home
🏠 Home activated          ← no second "mounted"

The page shows a button labelled Load async component.
Clicking it renders the amber ⏳ Loading...
fallback for roughly 1.5s, then replaces it with a green panel containing AsyncHeavy and Loaded at: <current time>.
Clicking again unmounts the component.

[Load async component]

0.0s – 1.5s   ⏳ Loading...            (amber fallback, #fef3c7)
after 1.5s    AsyncHeavy
              Loaded at: 10:24:31      (green panel, #ecfdf5)

button label becomes [Unload async component]
click it → the panel disappears