Vue Suspense Component
with default and #fallback slots, async component loading, nested Suspense.
What Suspense Solves
Suspense is a built-in Vue component that coordinates loading states for components that have asynchronous dependencies.
Without it, every async component manages its own spinner. With Suspense you declare one boundary that waits for all nested async work and shows a single fallback until everything is ready.
Two Slots: default and fallback
Suspense exposes two named slots:
- default — the real content, which may contain async components or an async
setup() - fallback — what to show while the default slot resolves
When all async dependencies settle, Vue swaps the fallback out for the default content.
<template>
<Suspense>
<template #default>
<UserDashboard />
</template>
<template #fallback>
<div class="spinner">Loading dashboard...</div>
</template>
</Suspense>
</template>