JAVASCRIPT
Dynamically Rendering Components with Vue 3 `<component :is />`
Learn to render different components conditionally or dynamically at runtime using Vue 3's special `<component :is />` element for flexible UIs.
<script setup>
import { ref } from 'vue';
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';
import ComponentC from './ComponentC.vue';
// Reactive variable to hold the currently active component
const activeComponent = ref('ComponentA'); // Default component
// Map string names to actual component references
const components = {
ComponentA,
ComponentB,
ComponentC
};
const selectComponent = (componentName) => {
activeComponent.value = componentName;
};
</script>
<template>
<div>
<h1>Dynamic Component Demo</h1>
<nav>
<button @click="selectComponent('ComponentA')" :class="{ active: activeComponent === 'ComponentA' }">Show A</button>
<button @click="selectComponent('ComponentB')" :class="{ active: activeComponent === 'ComponentB' }">Show B</button>
<button @click="selectComponent('ComponentC')" :class="{ active: activeComponent === 'ComponentC' }">Show C</button>
</nav>
<div class="component-container">
<!-- Render the active component dynamically -->
<component :is="components[activeComponent]" />
</div>
</div>
</template>
<style scoped>
button {
margin-right: 10px;
padding: 8px 15px;
cursor: pointer;
}
button.active {
background-color: #42b983;
color: white;
border-color: #42b983;
}
.component-container {
border: 1px dashed #ccc;
padding: 20px;
margin-top: 20px;
min-height: 100px;
}
</style>
<!-- Dummy ComponentA.vue -->
<template>
<div style="background-color: #e0ffe0; padding: 15px;">
<h3>This is Component A</h3>
<p>Some content specific to A.</p>
</div>
</template>
<!-- Dummy ComponentB.vue -->
<template>
<div style="background-color: #e0e0ff; padding: 15px;">
<h3>This is Component B</h3>
<p>Some content specific to B.</p>
</div>
</template>
<!-- Dummy ComponentC.vue -->
<template>
<div style="background-color: #ffffe0; padding: 15px;">
<h3>This is Component C</h3>
<p>Some content specific to C.</p>
</div>
</template>
How it works: This snippet demonstrates how to dynamically render different components based on a reactive state variable using Vue 3's special `<component :is />` element. A `ref` named `activeComponent` stores the name of the component to be rendered. An object `components` maps these string names to their actual imported component references. When a button is clicked, `selectComponent` updates `activeComponent.value`, which in turn tells `<component :is="components[activeComponent]" />` to render the corresponding component. This is highly useful for tabbed interfaces, wizards, or views where content changes frequently without full page reloads.