midVue.js
What are Dynamic Components and how do you use them?
Updated May 4, 2026
Short answer
They allow switching between components dynamically using the <component :is="..."> element.
Deep explanation
By binding a variable to the is attribute of the special <component> tag, Vue can swap the rendered component on the fly. This is often used with <keep-alive> to preserve state when switching.
Real-world example
A multi-step wizard where each step is a separate component and you toggle them based on the current step index.
Common mistakes
- Passing the component name as a string without registering it, or passing the component object incorrectly in Options API.
Follow-up questions
- What does <KeepAlive> do?