What is the Suspense component in Vue?

Question

Accepted Answer

`` is a built-in component that coordinates **async dependencies** in its component tree — it shows a fallback (loading UI) until all nested async operations resolve, then displays the real content. It removes manual `isLoading` boilerplate. ## The two slots ```vue ``` ## It works with async setup() / top-level await ```vue ``` Normally a component can't `await` in setup without managing loading state. `` lets a child use **top-level `await`** (or async `setup`), and the parent Suspense handles the loading state for it — the child code stays clean, just `await`ing its data. ## It waits for ALL nested async dependencies ```text waits for every async setup in its subtree to resolve, then swaps the fallback for the real content in one go (avoids a cascade of separate spinners). ``` ## Handling errors ```vue ``` Pair Suspense with an error boundary (`onErrorCaptured`) to handle failed async setups, since Suspense itself only manages the loading/loaded transition. ## Status note ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Why it matters `` declaratively coordinates async loading states — letting components `await` their data directly while a single ancestor shows one fallback until everything's ready. It eliminates scattered `isLoading` flags and multiple spinners, and underpins data fetching in frameworks like Nuxt. Knowing it exists (and that it's still experimental, best paired with an error boundary) is useful for clean async UI, especially in SSR/data-heavy apps.