<Suspense> Wait for Async Dependencies
Last updated: 2026-10-22
<Suspense> Wait for Async Dependencies
| Group | Built-ins |
|---|---|
| Kind | Component / Element |
| Scope | Template |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
<Suspense>
<template #default><AsyncChild /></template>
<template #fallback><p>Loading…</p></template>
</Suspense>⚙️ Arguments
| props | #default (async content) and #fallback (shown while waiting) |
|---|
▶ Example
Edit the code below and see the live result:
Output：
Shows 'Loading…' then swaps to 'Async content ready' after ~0.8s.💡 Key Points
⚠️ Warning Still experimental — syntax may shift between versions.
ℹ️ Note It waits for the nearest async dependencies; nesting handles deeper ones.
💡 Tip A common pairing with lazy route components.
🏷️ Related Built-ins
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from a manual loading flag?
A Suspense reacts to readiness automatically, without manual flags.
Q Does it work under SSR?
A SSR waits for async content before emitting HTML.
Q How are errors handled?
A Capture failures with onErrorCaptured; Suspense is not an error boundary.
