`<Suspense>`

Coordinates async dependencies, showing a fallback until they resolve.

Since Vue 3.0 Spec ↗

Syntax

<Suspense><template #default /><template #fallback /></Suspense>

Returns

component — Renders fallback then default once async setup resolves.

Examples

<!-- AsyncUser.vue uses top-level await in setup -->
<script setup lang="ts">
const res = await fetch('/api/user');
const user = await res.json();
</script>
<template><p>{{ user.name }}</p></template>

<!-- parent -->
<template>
  <Suspense>
    <template #default><AsyncUser /></template>
    <template #fallback><p>Loading...</p></template>
  </Suspense>
</template>

Notes

<Suspense> waits for async dependencies in its default slot (components with async setup or top-level await) and shows the fallback meanwhile. Combine with onErrorCaptured for error states. Still marked experimental; its API may change in future minor versions.