Vue Dynamic Components

Vue Dynamic Components: Switching Components with <component :is>

Vue dynamic components let you swap between different components at the same mount point using the built-in <component :is="..."> element. Instead of writing long v-if / v-else-if chains, you bind :is to a variable holding the active component.

This pattern fits tabbed interfaces, multi-step checkout wizards, and configurable dashboard widgets. Each tab or step stays isolated in its own .vue file while sharing one container.

flowchart TD
    State["currentTab = shallowRef(HomeTab)"] --> Comp["component :is='currentTab'"]
    Comp --> Keep["KeepAlive Caches Inactive State"]

Preserving State with <KeepAlive>

By default, Vue unmounts and destroys the outgoing component whenever :is changes, resetting any typed form inputs inside it. Wrapping <component :is> inside <KeepAlive> caches inactive component instances in memory so users keep their state when switching tabs back and forth.

Practical SFC Dynamic Components Example

Use shallowRef() instead of ref() when storing imported component objects inside <script setup>. This tells Vue not to wrap the component definition itself in a deep reactive proxy.

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

const tabs = [
  { name: 'Home', comp: HomeTab },
  { name: 'Profile', comp: ProfileTab },
  { name: 'Settings', comp: SettingsTab }
];

const currentTab = shallowRef(HomeTab);
</script>

<template>
  <div class="tab-system">
    <nav class="tab-buttons">
      <button
        v-for="tab in tabs"
        :key="tab.name"
        :class="{ active: currentTab === tab.comp }"
        @click="currentTab = tab.comp"
      >
        {{ tab.name }}
      </button>
    </nav>

    <KeepAlive include="ProfileTab,SettingsTab">
      <component :is="currentTab" class="tab-content" />
    </KeepAlive>
  </div>
</template>

Common Mistakes

• Wrapping Component Definitions in ref(): Passing a .vue component to ref(HomeTab) makes Vue deeply observe the entire component object, triggering a console performance warning. Always use shallowRef().
• Passing String Names Without Global Registration: In <script setup>, imported components are local variables, not global names. Pass the imported component object :is="HomeTab" rather than a string 'HomeTab'.
• Caching Too Many Heavy Views: Unlimited <KeepAlive> caching can increase memory usage. Set :max="5" or use include to cache only specific component names.

Frequently Asked Questions

Which lifecycle hooks run when a <KeepAlive> component switches?

Instead of onMounted and onUnmounted running every switch, Vue invokes onActivated() when the cached component appears and onDeactivated() when it hides.

Can I pass props and events to <component :is>?

Yes. Bind props and listeners directly on <component :is="currentTab" :user-id="id" @save="onSave" /> and Vue forwards them to the active component.

Can <component :is> render standard HTML tags too?

Yes. Passing a tag string like :is="href ? 'a' : 'button'" renders a native <a> or <button> element dynamically.