Chapter 31: Vue Dynamic Components

Dynamic Components (<component :is=”…”>)

This is the Vue feature that lets you decide at runtime which component to render — instead of hard-coding the tag name in the template.

In simple words:

Instead of writing <UserProfile /> or <ProductCard /> directly, you write <component :is=”currentComponent” /> and then change currentComponent dynamically based on data, user action, route, permission, tab selection, etc.

This is extremely common in real applications — almost every medium/large Vue app uses dynamic components somewhere.

Why Do We Need Dynamic Components? Real-Life Situations

1. Tab navigation / dashboard widgets Different tabs show completely different components
2. Role-based UI (admin vs user vs guest sees different views)
3. Lazy-loaded / async components (load heavy chart only when needed)
4. Wizard / stepper forms (step 1 → step 2 → step 3 = different component)
5. Content rendering from CMS / API (page builder style — JSON says which component to show)
6. A/B testing or feature flags (show variant A or B)
7. Polymorphic lists (render UserItem / ProductItem / OrderItem based on type)

Basic Syntax – The <component :is> Tag

:is can be:

• A component name (string) — if globally registered
• A component definition (imported component object)
• A dynamic import (() => import(‘./SomeView.vue’))
• A resolved component from a map/object

Real, Complete Example – Tabbed Dashboard (Most Common Use Case)

File: src/views/DashboardView.vue

Different Ways to Use :is (All Valid in 2026)

1. Static string (needs global registration)

   vue

   PHP

   0 1 2 3 4 5 6

   <component :is="'UserProfile'" />

2. Imported component directly

   vue

   PHP

   0 1 2 3 4 5 6 7

   import Profile from './Profile.vue' <component :is="Profile" />

3. Async / lazy component (best for performance)

   vue

   PHP

   0 1 2 3 4 5 6 7

   const HeavyChart = defineAsyncComponent(() => import('./HeavyChart.vue')) <component :is="showChart ? HeavyChart : null" />

4. Object map / dictionary (very clean for tabs)

   JavaScript

   PHP

   0 1 2 3 4 5 6 7 8 9 10 11 12

   const views = {   home: HomeView,   profile: ProfileView,   settings: SettingsView }   <component :is="views[activeView]" />

5. Dynamic import based on string (CMS / config driven)

   JavaScript

   PHP

   0 1 2 3 4 5 6 7

   const componentName = 'SomeWidget' // from API <component :is="() => import(`@/components/widgets/{componentName}.vue`)" />

Important Gotchas & Pro Tips (2026 Edition)

• Always use :key when switching dynamic components in v-if / v-show / lists

  vue

  PHP

  0 1 2 3 4 5 6

  <component :is="current" :key="activeTab" />

  → Forces Vue to destroy + recreate when tab changes → prevents state leakage

• Use <KeepAlive> when you want to preserve state across switches

  vue

  PHP

  0 1 2 3 4 5 6 7 8

  <KeepAlive>   <component :is="currentView" /> </KeepAlive>

  → Amazing for tabs — keeps form data, scroll position, etc.

• Error handling for failed async components

  vue

  PHP

  0 1 2 3 4 5 6 7 8 9 10 11 12

  const MyComponent = defineAsyncComponent({   loader: () => import('./MyComp.vue'),   errorComponent: ErrorView,   loadingComponent: LoadingSpinner,   delay: 200,   timeout: 3000 })

• TypeScript — works beautifully with defineAsyncComponent<…>()

Summary Table – Dynamic Components in Practice

Your Mini Homework

1. Create 3 small components: OverviewTab.vue, StatsTab.vue, ProfileTab.vue
2. Build a tabbed interface exactly like the example above
3. Add <KeepAlive> → switch tabs → see that form inputs / scroll position are preserved

Any part still fuzzy? Want to see:

• Dynamic components + <transition> for smooth tab animations?
• Real CMS-style rendering from JSON?
• Error boundary around async dynamic components?
• Dynamic components inside v-for (polymorphic list)?

Just tell me — we’ll build the next powerful example together 🚀

Happy dynamic-component-ing from Hyderabad! 💙