Dynamic Component Rendering in Vue 3

Dynamic components allow switching between components at runtime using the <component> element.

Example: Switching Components Dynamically

<template>
  <div>
    <button @click="currentView = 'ComponentA'">Show A</button>
    <button @click="currentView = 'ComponentB'">Show B</button>
    <component :is="currentView" />
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  data() {
    return { currentView: 'ComponentA' };
  },
  components: { ComponentA, ComponentB },
};
</script>