Async Components and Suspense
Load components lazily with defineAsyncComponent, wrap them in , and show fallback content while the component bundle loads.
Why Async Components?
Loading large or rarely-used components on demand (e.g. an admin panel, a chart library) keeps the initial bundle small. Vue's defineAsyncComponent handles the dynamic import lifecycle.
defineAsyncComponent
Pass a loader function that returns a promise resolving to a component. Vue handles loading, errors, and timeouts.
import { defineAsyncComponent } from 'vue';
const Dashboard = defineAsyncComponent(
() => import('./Dashboard.vue')
);
// Use it like a normal component:
<template>
<Dashboard />
</template>All lessons in this course
- provide() and inject() for Dependency Injection
- Async Components and Suspense
- Custom Directives
- Plugin System: app.use()