Dynamic components

Last reviewed Jun 1, 2026 Content v20260601

Track mode

client_vue

Means

In-browser Vue TS

Reading

~1 min

Level

intermediate

This lesson

This lesson teaches Dynamic components: the concepts, APIs, and habits you need before advancing in Vue.

Without Dynamic components, you will struggle to read or extend Vue codebases and playground exercises.

You will apply Dynamic components in contexts like: Greenfield SPAs, dashboards, design systems, and full-stack apps that pair Vue with PHP or Node APIs.

Write TypeScript, click Run—Vue 3 loads from CDN with the template compiler, mountApp shows UI in #app, and printOutput feeds the terminal.

Toward the end of the track—consolidate before capstone-style review lessons.

Tabs, wizards, and dashboards often swap the active panel without changing routes. Vue’s <component :is="..."> renders whichever component definition matches the current tab id.

Local registration

Register child components on the parent’s components option (or globally in apps). The :is binding accepts a component object or string name.

Keep-alive (concept)

Wrap dynamic views in <KeepAlive> when you need to preserve input state across tab switches—otherwise Vue destroys inactive panels.

Self-check

What does :is bind to—a tag name or a component definition?
When would you prefer a router view over dynamic components?

Playground

Runs in your browser in a sandboxed frame. Backend runners appear when this track’s profile allows them.

Discussion

Past discussion is visible to everyone. Only logged-in users can post comments and replies.

Starter discussion topics

is attribute use?
KeepAlive when?

No discussion yet. Be the first to ask a question.