Vue Dynamic Components Explained — Render Components Dynamically

In this tutorial, you will learn about Vue Dynamic Components Explained. We cover key concepts, practical examples, and best practices to help you master this topic.

Vue's component element with the is attribute enables dynamic component rendering, switching between different components at runtime while preserving state with keep-alive.

What You'll Learn

• component element with is binding
• Dynamic component switching
• keep-alive for state preservation
• Async components with defineAsyncComponent
• Dynamic component patterns

Why It Matters

Dynamic components power tab interfaces, multi-step forms, and conditional views without complex v-if chains, keeping template structure clean and performant.

<template>
  <div>
    <div class="tabs">
      <button v-for="tab in tabs" :key="tab" @click="activeTab = tab"
        :class="{ active: activeTab === tab }">
        {{ tab }}
      </button>
    </div>

    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import ProfileTab from "./tabs/ProfileTab.vue";
import SettingsTab from "./tabs/SettingsTab.vue";
import NotificationsTab from "./tabs/NotificationsTab.vue";

const tabs = ["profile", "settings", "notifications"];
const activeTab = ref("profile");

const tabComponents = { profile: ProfileTab, settings: SettingsTab, notifications: NotificationsTab };
const currentComponent = computed(() => tabComponents[activeTab.value]);
</script>

Expected output: Tab buttons switch between Profile, Settings, and Notifications components. keep-alive preserves each tab's state when switching.