Vue Dynamic Components

🔄 Vue Dynamic Components

In Vue.js, dynamic components let you switch between multiple components at runtime using a single placeholder.

They’re perfect for tabs, dashboards, modals, and step-based UIs.

What are Dynamic Components?

Instead of hardcoding a component name, Vue lets you render different components dynamically using the built-in <component> element and the :is attribute.

currentComponent can be a component name, imported component, or async component.

Basic Example: Switch Components

Parent Component

<template>
<button @click="current = 'Home'">Home</button>
<button @click="current = 'Profile'">Profile</button><component :is="current" />
</template>

<script>
import Home from './components/Home.vue'
import Profile from './components/Profile.vue'

export default {
components: { Home, Profile },
data() {
return {
current: 'Home'
}
}
}
</script>

<button @click="current = 'Profile'">Profile</button><component :is="current" />

</template>

import Home from './components/Home.vue'

import Profile from './components/Profile.vue'

export default {

components: { Home, Profile },

data() {

return {

current: 'Home'

}

</script>

✔ Clicking buttons swaps components instantly.

Using Component References (Recommended)

✔ Safer than string names
✔ Better IDE support

Dynamic Components with Tabs (Real-World)

<template>
<button
v-for="tab in tabs"
:key="tab.name"
@click="current = tab.component"
>
{{ tab.name }}
</button><component :is="current" />
</template>

<script>
import TabA from './TabA.vue'
import TabB from './TabB.vue'

export default {
data() {
return {
tabs: [
{ name: 'Tab A', component: TabA },
{ name: 'Tab B', component: TabB }
],
current: TabA
}
}
}
</script>

<button

v-for="tab in tabs"

:key="tab.name"

@click="current = tab.component"

</button><component :is="current" />

</template>

import TabA from './TabA.vue'

import TabB from './TabB.vue'

export default {

data() {

return {

tabs: [

{ name: 'Tab A', component: TabA },

{ name: 'Tab B', component: TabB }

current: TabA

}

</script>

✔ Clean and scalable tab system.

Preserving State with `<keep-alive>`

By default, switching components destroys the old one.
Use <keep-alive> to cache components.

✔ Keeps form input, scroll position, and state
✔ Ideal for tabs & multi-step forms

Conditional Dynamic Components

Dynamic Components with Props

✔ Props pass normally
✔ Events can be emitted normally ($emit)

Dynamic Components + `v-for`

✔ Used in dashboards & widget systems

Async Dynamic Components (Performance ⚡)

Load components only when needed.

✔ Smaller bundle size
✔ Faster initial load

Common Use Cases

Tab navigation
Dashboards
Multi-step forms
Wizards
Modals
CMS page builders

Common Mistakes ❌

❌ Using string names without registering components
❌ Forgetting keep-alive when state should persist
❌ Overusing dynamic components where simple v-if is enough

Best Practices ✅

✔ Prefer component references over strings
✔ Use <keep-alive> wisely
✔ Combine with async imports for performance
✔ Keep dynamic logic simple and clear

Summary Table

Feature	How
Dynamic render	`<component :is="comp" />`
Cache state	`<keep-alive>`
Tabs	Dynamic components
Lazy load	`() => import()`
Pass props	Normal props

🏁 Conclusion

Vue dynamic components give you powerful runtime flexibility without complex logic.
They are essential for building modern, scalable, and high-performance Vue applications.

Vue Dynamic Components