Skip to content

Dynamic Components

The <component :is="..."> element renders different components dynamically. This lesson covers practical patterns, syntax, and mistakes to avoid.

Switching Components with <component :is>

The <component :is="..."> element renders different components dynamically.

Combine with <KeepAlive> to cache expensive tab panels.

<component :is="current" />
<KeepAlive>
  <component :is="tab" />
</KeepAlive>

Dynamic component with optional cache.

is Value

string name or imported component object
  • Prefer Vue 3 + Composition API.
  • Use script setup for SFCs.
  • Keep components focused.
  • Lean on official docs.

Dynamic Components Cheatsheet

Quick reference for patterns covered in this lesson.

Item Example Purpose
is bind Switch
KeepAlive cache Tabs
include/exclude filter Cache
async defineAsyncComponent Lazy
keys force remount State
tabs pattern UX

State Preservation

Without KeepAlive, switching destroys state.

Common Mistakes

  • String names without registration.
  • Caching everything forever without max.

Key Takeaways

  • Dynamic Components is a core Vue skill.
  • Practice in a Vite app.
  • Prefer clarity.
  • Revisit docs for edge cases.

Pro Tip

Use KeepAlive for tab UIs where users bounce back and forth.

You now understand dynamic components. Next, continue with Component Communication to keep building your Vue skills.