Mastering Dynamic and Asynchronous Components in Vue 3

// components/HomeDashboard.vue
<template>
  <div class="dashboard-card">
    <h3>Home Dashboard</h3>
    <p>Welcome to your personalized dashboard!</p>
  </div>
</template>
<script setup></script>
<style scoped> .dashboard-card { border: 1px solid #eee; padding: 15px; margin: 10px; border-radius: 8px; background-color: #f9f9f9; } </style>

// components/AnalyticsPanel.vue
<template>
  <div class="dashboard-card">
    <h3>Analytics Panel</h3>
    <p>Detailed insights and data visualizations.</p>
    <p>(This component was loaded lazily!)</p>
  </div>
</template>
<script setup></script>
<style scoped> .dashboard-card { border: 1px solid #eee; padding: 15px; margin: 10px; border-radius: 8px; background-color: #f0f8ff; } </style>

// App.vue
<template>
  <div>
    <h1>Dynamic Components Example</h1>
    <button @click="activeComponent = 'HomeDashboard'">Show Home</button>
    <button @click="activeComponent = 'AnalyticsPanel'">Show Analytics</button>

    <div class="component-container">
      <component :is="currentComponent" />
    </div>
  </div>
</template>

<script setup>
import { ref, shallowRef, computed } from 'vue';
import HomeDashboard from './components/HomeDashboard.vue';

// Define async components for lazy loading
const AsyncAnalyticsPanel = shallowRef(
  defineAsyncComponent(() => import('./components/AnalyticsPanel.vue'))
);

const components = {
  HomeDashboard,
  AnalyticsPanel: AsyncAnalyticsPanel,
  // You can add more components here
};

const activeComponent = ref('HomeDashboard');

const currentComponent = computed(() => {
  return components[activeComponent.value];
});

import { defineAsyncComponent } from 'vue'; // Import defineAsyncComponent
</script>

<style>
.component-container {
  margin-top: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  min-height: 150px;
}
</style>