Dynamic and Asynchronously Loaded Components

// components/ComponentA.vue
<template><div>This is Component A</div></template>
<script setup> console.log('ComponentA loaded'); </script>

// components/ComponentB.vue
<template><div>This is Component B</div></template>
<script setup> console.log('ComponentB loaded'); </script>

// src/App.vue
<template>
  <div>
    <button @click="currentComponent = 'ComponentA'">Show A</button>
    <button @click="currentComponent = 'ComponentB'">Show B</button>
    <button @click="currentComponent = 'AsyncComponent'">Show Async</button>

    <Transition name="fade" mode="out-in">
      <component :is="currentComponent" />
    </Transition>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue';
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';

const AsyncComponent = defineAsyncComponent(() =>
  import('./components/AsyncComponent.vue')
);

const currentComponent = ref(ComponentA);

// To use string names, you need to register components globally or locally
// For simplicity here, we use component objects directly.
// If you prefer strings, you'd define:
// const componentsMap = {
//   'ComponentA': ComponentA,
//   'ComponentB': ComponentB,
//   'AsyncComponent': AsyncComponent
// };
// currentComponent = ref('ComponentA');
// then :is="componentsMap[currentComponent]"
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
}
</style>

// components/AsyncComponent.vue (create this file)
<template><div>This is an Asynchronously Loaded Component.</div></template>
<script setup> console.log('AsyncComponent loaded'); </script>