BeginnerCoder
Donate
Lesson 21 — Dynamic components
Swap components by name
The special <component :is="…"> tag renders whichever component you give it, and switches when that value changes. Keep your components in an object and pick one by key — that is how tabs and step-by-step wizards are built.
<component :is="steps[current]" />
Why it matters: one placeholder can show any of many views, without a long chain of v-if.
Render the current tab with <component :is>. It should show "Profile page", then "Settings page" after Swap.
Test your knowledgeA quick 3-question quiz on this lesson — instant feedback.
Ready for more? Optional paid resources that pick up where this lesson leaves off.
Some links on this page are affiliate links: we may earn a commission at no extra cost to you. As an Amazon Associate I earn from qualifying purchases.
Project-based Vue.js Foundations courses if you want a structured paid path after the free lessons. Wait for a sale — prices drop often.
Browse on Udemy →Search Amazon for Vue.js Foundations books — check the publication year so the examples match current versions.
Search Amazon →