defineAsyncComponent() Define an Async Component
Last updated: 2026-10-22
defineAsyncComponent() Define an Async Component
defineAsyncComponent() creates a component loaded on demand at first render — for route-level and heavy lazy loading.
| Group | Global API |
|---|---|
| Kind | API |
| Scope | Global |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
const Editor = defineAsyncComponent(() => import("./Editor.vue"))
// with loading and error fallbacks
const Panel = defineAsyncComponent({
loader: () => import("./Panel.vue"),
loadingComponent: Spinner,
errorComponent: ErrorBox,
delay: 200
})⚙️ Arguments
| loader | options | A loader returning a Promise, or an options object |
|---|
Returns：An async component that loads on first render
▶ Example
Edit the code below and see the live result:
Output：
'Lazy component ready' appears after about 0.8s.💡 Key Points
💡 Tip Route-level lazy loading gives the biggest win.
ℹ️ Note delay avoids loading flicker; timeout bounds waiting.
⚠️ Warning Keep the component alive with KeepAlive to preserve state.
🏷️ Related Global API
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Relation to dynamic import()?
A It wraps import() with loading and error fallbacks.
Q When does loading start?
A On first render; later renders reuse the cached module.
Q Does it work with Suspense?
A Yes — Suspense can own the waiting state.
