Problem Statement
How do you lazy-load components and show a loading state?
Explanation
Wrap a dynamic import with defineAsyncComponent and provide loading/error components and delays/timeouts. Pair with <Suspense> for async setup. This splits code and reduces initial bundle size.
Code Solution
SolutionRead Only
import { defineAsyncComponent } from 'vue'
const Chart = defineAsyncComponent({
loader: () => import('./Chart.vue'),
loadingComponent: () => import('./Loading.vue'),
delay: 200,
timeout: 10000
})