Vue.js 43 🟢 Managing Asynchronous Rendering with

A component that loads data asynchronously has three states: loading, loaded, and failed. The traditional way to handle these is a v-if chain: show a spinner while loading is true, show the content when data is present, and show an error when error is set. Every component repeats this pattern, and every parent repeats the loading UI for each child. Vue 3’s <Suspense> changes this. It wraps one or more async components, shows a single fallback while any of them is pending, and renders the group once all of them have resolved. The loading state is no longer a per-component concern. It is a boundary concern, declared once, at the level where the parent knows what to show.

Key point: <Suspense> is not a data-fetching library. It is a rendering boundary that catches pending states from async components inside it. The components must signal their pending state by using an async setup() or by returning a Promise from a loader. Suspense then coordinates them.

---

Why Suspense exists

The per-component loading problem. Without Suspense, each component that fetches data is responsible for its own loading UI. The component shows a spinner, then the content. If five components on the same page each fetch data, the page shows five spinners that resolve at different times. The layout jumps as each one lands.

The waterfall problem. When a parent and a child both fetch data, the child’s fetch cannot start until the parent has rendered, and the child cannot render until the parent has rendered. The fetches happen sequentially. Suspense does not solve this on its own, but it makes the dependency explicit: the parent and child can fetch in parallel, and Suspense waits for both.

The coordination problem. A page that needs three pieces of data should show one loading state, not three. The user should see a single spinner that disappears when everything is ready. Suspense provides exactly this: one fallback for the entire subtree.

The layout-shift problem. When each component resolves separately, the layout shifts as each one appears. The content jumps. A single fallback that covers the whole subtree keeps the layout stable until everything is ready.

The compositional problem. Suspense boundaries nest. A top-level boundary shows a page-level fallback. Inner boundaries show more granular fallbacks. This lets the developer decide which parts of the page should wait for each other and which should resolve independently.

The async-setup problem. With <script setup>, a top-level await makes the component async. The component cannot render until the Promise resolves. Without Suspense, Vue does not know how to handle this, and the component appears to be stuck. Suspense is the mechanism that renders the fallback while the async setup is pending.

---

a. The Suspense component

<Suspense> has two slots: #default for the content and #fallback for the pending state. It renders the fallback until all async dependencies inside the default slot have resolved.

The minimal usage

<template>
  <Suspense>
    <AsyncProfile />
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

The AsyncProfile component is rendered once it resolves. Until then, the fallback is shown. The fallback is replaced, not appended.

The async setup

A component inside <Suspense> signals its pending state by awaiting in its setup function or in the top level of <script setup>.

<!-- AsyncProfile.vue -->
<script setup>
const response = await fetch('/api/profile');
const profile = await response.json();
</script>

<template>
  <div>{{ profile.name }}</div>
</template>

The top-level await makes the component async. Suspense waits for the Promise before rendering it. Without Suspense, the component would never render.

The multiple children

Suspense waits for all async components in the default slot. If three components are async, the fallback is shown until all three have resolved.

<Suspense>
  <AsyncProfile />
  <AsyncOrders />
  <AsyncRecommendations />
  <template #fallback>
    <PageLoader />
  </template>
</Suspense>

The fallback disappears once all three resolve. This is the coordination benefit: one loading state for the whole group.

The nested boundaries

Suspense boundaries nest. Each boundary coordinates its own subtree. The outer boundary waits for its own async dependencies, and the inner boundaries resolve independently.

<Suspense>
  <AsyncLayout>
    <Suspense>
      <AsyncSidebar />
      <template #fallback>
        <SidebarSkeleton />
      </template>
    </Suspense>
    <Suspense>
      <AsyncContent />
      <template #fallback>
        <ContentSkeleton />
      </template>
    </Suspense>
  </AsyncLayout>
  <template #fallback>
    <PageLoader />
  </template>
</Suspense>

The outer boundary shows the page loader until AsyncLayout resolves. Once it does, the inner boundaries show their own fallbacks until the sidebar and content resolve. The result is a progressive reveal: the layout appears first, then the sidebar and content fill in independently.

The Suspense events

Suspense emits three events: pending, resolve, and fallback. They are useful for logging and for coordinating animations.

<Suspense
  @pending="onPending"
  @resolve="onResolve"
  @fallback="onFallback"
>
  <AsyncProfile />
  <template #fallback><Spinner /></template>
</Suspense>

The pending event fires when the boundary enters the pending state. The resolve event fires when the default slot is rendered. The fallback event fires when the fallback is rendered.

The experimental status

In Vue 3.5 and earlier, <Suspense> is documented as experimental. The API is stable in practice, and it is used widely, but the Vue team reserves the right to make minor adjustments. The core behavior — default and fallback slots, async setup, nested boundaries — is unlikely to change.

---

b. Async setup patterns

A component inside <Suspense> must signal its pending state. The two mechanisms are async setup() and top-level await in <script setup>.

The async setup function

With the Options API or the setup function, an async setup() returns a Promise. Vue suspends the component until the Promise resolves.

<script>
import { ref } from 'vue';

export default {
  async setup() {
    const response = await fetch('/api/profile');
    const profile = await response.json();
    return { profile };
  },
};
</script>

<template>
  <div>{{ profile.name }}</div>
</template>

The returned object becomes the render context, just like a synchronous setup.

The top-level await in script setup

With <script setup>, a top-level await makes the component async automatically. This is the idiomatic form in Vue 3.

<script setup>
const response = await fetch('/api/profile');
const profile = await response.json();
</script>

<template>
  <div>{{ profile.name }}</div>
</template>

The compiler transforms the await into the async setup equivalent. Suspense handles the pending state.

The useAsyncData pattern

For reusable data fetching, a composable wraps the fetch and returns reactive state. The component uses the composable and awaits its result.

// composables/useUser.ts
export function useUser(id: string) {
  const user = ref(null);
  const error = ref(null);
  const promise = fetch(`/api/users/${id}`)
    .then((r) => r.json())
    .then((data) => { user.value = data; })
    .catch((e) => { error.value = e; });
  return { user, error, promise };
}

<script setup>
import { useUser } from '@/composables/useUser';

const { user } = useUser('42');
await user.value;
</script>

The composable returns a Promise that the component awaits. Suspense waits for it. The pattern separates the fetch logic from the component.

The Suspense-compatible composable

A well-designed composable returns a Promise that resolves when the data is ready. The component awaits the Promise. The composable handles caching and revalidation internally.

const cache = new Map();

export function useUser(id: string) {
  if (!cache.has(id)) {
    cache.set(id, fetch(`/api/users/${id}`).then((r) => r.json()));
  }
  const user = ref(null);
  const promise = cache.get(id).then((data) => { user.value = data; });
  return { user, promise };
}

<script setup>
const { user, promise } = useUser('42');
await promise;
</script>

The cache avoids refetching on navigation. The Promise resolves immediately if the data is cached.

The error handling

Suspense does not handle errors. If the async setup throws, the error propagates to the nearest onErrorCaptured hook or to the app’s global error handler.

<script setup>
import { onErrorCaptured, ref } from 'vue';

const hasError = ref(false);

onErrorCaptured((err) => {
  hasError.value = true;
  return false;
});
</script>

<template>
  <div v-if="hasError">Something went wrong.</div>
  <Suspense v-else>
    <AsyncProfile />
    <template #fallback><Spinner /></template>
  </Suspense>
</template>

The onErrorCaptured hook catches errors from the entire subtree, including the async setup. Returning false stops propagation.

---

c. Suspense versus manual loading

Suspense is not the only way to handle async rendering. The manual approach with v-if and ref is still valid for cases where Suspense does not fit.

The manual approach

The manual approach tracks loading and error state explicitly and uses v-if to switch between them.

<script setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);
const data = ref(null);
const error = ref(null);

onMounted(async () => {
  try {
    const response = await fetch('/api/profile');
    data.value = await response.json();
  } catch (e) {
    error.value = e;
  } finally {
    loading.value = false;
  }
});
</script>

<template>
  <div v-if="loading"><Spinner /></div>
  <div v-else-if="error"><ErrorDisplay :error="error" /></div>
  <div v-else>{{ data.name }}</div>
</template>

The component manages its own state. Every component that fetches data repeats this pattern.

When Suspense is better

Suspense is better when the loading state should be coordinated across multiple components. A page with a header, a sidebar, and content that all fetch data should show one spinner, not three. Suspense provides that coordination without prop drilling or state sharing.

Suspense is also better when the async setup is a natural fit. A component that begins with const data = await fetch(...) reads more cleanly than one that uses onMounted with a loading flag.

When the manual approach is better

The manual approach is better when the loading state is more nuanced than a single flag. A component that shows different UI for loading more data versus initial load, or that shows progress, or that retries on failure, may be easier to express with explicit state.

The manual approach is also better when the app does not use Suspense at all. Mixing Suspense and manual loading in the same component tree is possible but requires discipline.

The comparison

Aspect	Suspense	Manual
Loading coordination	Automatic	Manual
Nested async	Built-in	Per-component
Error handling	onErrorCaptured	Try/catch
Code readability	Async/await	Callbacks + refs
Progress UI	Hard	Natural
Retry logic	Manual	Natural
Learning curve	Moderate	Low

The transition

A component can be refactored from manual to Suspense by removing the loading and error refs and moving the fetch into an async setup. The template simplifies because the loading state is now handled by the boundary.

The hybrid

A component tree can use Suspense at the top and manual loading inside specific components. The boundary handles the initial load, and inner components manage their own state for incremental loading. The two approaches coexist as long as the developer knows which component is responsible for which loading state.

---

Complete Example Session

<!-- ============================================
     PART 1: A BASIC ASYNC COMPONENT
     ============================================ -->

<!-- AsyncProfile.vue -->
<script setup>
const response = await fetch('/api/profile');
const profile = await response.json();
</script>

<template>
  <div class="profile">
    <h2>{{ profile.name }}</h2>
    <p>{{ profile.email }}</p>
  </div>
</template>

<!-- ============================================
     PART 2: SUSPENSE WITH FALLBACK
     ============================================ -->

<script setup>
import AsyncProfile from './AsyncProfile.vue';
import LoadingSpinner from './LoadingSpinner.vue';
</script>

<template>
  <Suspense>
    <AsyncProfile />
    <template #fallback>
      <LoadingSpinner />
    </template>
  </Suspense>
</template>

<!-- ============================================
     PART 3: MULTIPLE ASYNC COMPONENTS
     ============================================ -->

<script setup>
import AsyncProfile from './AsyncProfile.vue';
import AsyncOrders from './AsyncOrders.vue';
import AsyncRecommendations from './AsyncRecommendations.vue';
import PageLoader from './PageLoader.vue';
</script>

<template>
  <Suspense>
    <AsyncProfile />
    <AsyncOrders />
    <AsyncRecommendations />
    <template #fallback>
      <PageLoader />
    </template>
  </Suspense>
</template>

<!-- ============================================
     PART 4: NESTED SUSPENSE
     ============================================ -->

<template>
  <Suspense>
    <AsyncLayout>
      <Suspense>
        <AsyncSidebar />
        <template #fallback><SidebarSkeleton /></template>
      </Suspense>
      <Suspense>
        <AsyncContent />
        <template #fallback><ContentSkeleton /></template>
      </Suspense>
    </AsyncLayout>
    <template #fallback><PageLoader /></template>
  </Suspense>
</template>

<!-- ============================================
     PART 5: SUSPENSE EVENTS
     ============================================ -->

<template>
  <Suspense
    @pending="console.log('pending')"
    @resolve="console.log('resolved')"
    @fallback="console.log('fallback')"
  >
    <AsyncProfile />
    <template #fallback><Spinner /></template>
  </Suspense>
</template>

<!-- ============================================
     PART 6: SUSPENSE-COMPATIBLE COMPOSABLE
     ============================================ -->

<!-- composables/useUser.ts -->
<script>
import { ref } from 'vue';

const cache = new Map();

export function useUser(id) {
  if (!cache.has(id)) {
    cache.set(id, fetch(`/api/users/${id}`).then((r) => r.json()));
  }
  const user = ref(null);
  const promise = cache.get(id).then((data) => { user.value = data; });
  return { user, promise };
}
</script>

<!-- UserProfile.vue -->
<script setup>
import { useUser } from '@/composables/useUser';

const props = defineProps({ userId: String });
const { user, promise } = useUser(props.userId);
await promise;
</script>

<template>
  <div>{{ user.name }}</div>
</template>

<!-- ============================================
     PART 7: ERROR HANDLING
     ============================================ -->

<script setup>
import { onErrorCaptured, ref } from 'vue';

const hasError = ref(false);

onErrorCaptured((err) => {
  hasError.value = true;
  return false;
});
</script>

<template>
  <div v-if="hasError">Failed to load.</div>
  <Suspense v-else>
    <AsyncProfile />
    <template #fallback><Spinner /></template>
  </Suspense>
</template>

<!-- ============================================
     PART 8: SUSPENSE WITH ROUTER
     ============================================ -->

<!-- App.vue -->
<script setup>
</script>

<template>
  <Suspense @pending="isPending = true" @resolve="isPending = false">
    <RouterView />
    <template #fallback>
      <div class="route-loading">Loading page...</div>
    </template>
  </Suspense>
</template>

<!-- ============================================
     PART 9: TRANSITION WITH SUSPENSE
     ============================================ -->

<template>
  <RouterView v-slot="{ Component }">
    <Transition mode="out-in">
      <Suspense>
        <component :is="Component" />
        <template #fallback><PageLoader /></template>
      </Suspense>
    </Transition>
  </RouterView>
</template>

<!-- ============================================
     PART 10: MANUAL VS SUSPENSE
     ============================================ -->

<!-- MANUAL -->
<script setup>
import { ref, onMounted } from 'vue';

const loading = ref(true);
const data = ref(null);

onMounted(async () => {
  const r = await fetch('/api/profile');
  data.value = await r.json();
  loading.value = false;
});
</script>

<template>
  <Spinner v-if="loading" />
  <Profile v-else :data="data" />
</template>

<!-- SUSPENSE -->
<script setup>
const r = await fetch('/api/profile');
const data = await r.json();
</script>

<template>
  <Profile :data="data" />
</template>

The ten parts showed basic async components, Suspense with a fallback, multiple async children, nested boundaries, Suspense events, a Suspense-compatible composable, error handling, integration with the router, transitions, and the comparison with the manual approach.

---

Quick Reference

Suspense Slots

Slot	Purpose
#default	The async content
#fallback	The loading UI

Suspense Events

Event	When
pending	The boundary enters the pending state
resolve	The default slot renders
fallback	The fallback slot renders

Async Setup Forms

Form	Usage
async setup()	Options API or setup function
Top-level await	<script setup>
Composable returning a Promise	Reusable data fetching

Suspense vs Manual

Aspect	Suspense	Manual
Loading state	Boundary	Per-component
Coordination	Automatic	Manual
Error handling	onErrorCaptured	try/catch
Progress UI	Hard	Natural
Code readability	High	Medium

Nested Boundaries

Level	Fallback
Outer	Page-level loader
Inner sidebar	Sidebar skeleton
Inner content	Content skeleton

---

Best Practices

✅ Do This:

<!-- Use Suspense for coordinated loading. -->
<Suspense>
  <AsyncA />
  <AsyncB />
  <template #fallback><PageLoader /></template>
</Suspense>  <!-- ✅ -->

<!-- Use top-level await in script setup. -->
const data = await fetch('/api').then((r) => r.json());  <!-- ✅ -->

<!-- Nest boundaries for progressive reveal. -->
<Suspense>
  <AsyncLayout>
    <Suspense><AsyncSidebar /></Suspense>
  </AsyncLayout>
</Suspense>  <!-- ✅ -->

<!-- Handle errors with onErrorCaptured. -->
onErrorCaptured((err) => { hasError.value = true; return false; });  <!-- ✅ -->

<!-- Cache data in composables. -->
const cache = new Map();  <!-- ✅ -->

<!-- Use a single fallback for the whole group. -->
<template #fallback><PageLoader /></template>  <!-- ✅ -->

❌ Don’t Do This:

<!-- Don't mix async setup with manual loading. -->
await fetch(...); const loading = ref(true);  <!-- ❌ -->

<!-- Don't forget the fallback slot. -->
<Suspense><AsyncA /></Suspense>  <!-- ❌ Shows nothing while pending -->

<!-- Don't nest Suspense unnecessarily. -->
<Suspense><Suspense><AsyncA /></Suspense></Suspense>  <!-- ❌ No benefit -->

<!-- Don't expect Suspense to handle errors. -->
<Suspense><AsyncA /></Suspense>  <!-- ❌ Errors propagate -->

<!-- Don't fetch in onMounted inside a Suspense. -->
onMounted(() => { fetch(...); });  <!-- ❌ Suspense does not wait -->

<!-- Don't use Suspense for non-async setup. -->
<Suspense><SyncComponent /></Suspense>  <!-- ❌ No async, no effect -->

---

Common Pitfalls

Pitfall	Why It Happens	Fix
Nothing renders	Missing fallback slot	Add <template #fallback>
Suspense does not wait	Fetch in onMounted	Use async setup or top-level await
Errors crash the app	No error boundary	Use onErrorCaptured
Fallback never appears	Component resolves too fast	Expected; fallback shows only when pending
Data refetched on navigation	No cache	Add a cache in the composable
Layout shift	Multiple nested boundaries resolve at different times	Use a single boundary for related content
Waterfall	Child fetch waits for parent render	Fetch in parallel in the parent or use a shared composable

---

Real-World Examples

1. Basic Suspense

<Suspense><AsyncProfile /><template #fallback><Spinner /></template></Suspense>

2. Top-Level Await

<script setup>const data = await fetch('/api').then((r) => r.json());</script>

3. Multiple Children

<Suspense><AsyncA /><AsyncB /><template #fallback><Loader /></template></Suspense>

4. Nested Boundaries

<Suspense><AsyncLayout><Suspense><AsyncSidebar /></Suspense></AsyncLayout></Suspense>

5. Error Boundary

onErrorCaptured((err) => { hasError.value = true; return false; })

6. Suspense with Router

<Suspense><RouterView /><template #fallback><PageLoader /></template></Suspense>

7. Cache in Composable

const cache = new Map();

8. Suspense Events

<Suspense @pending="onPending" @resolve="onResolve">

9. Transition with Suspense

<Transition mode="out-in"><Suspense>...</Suspense></Transition>

10. Async Setup Function

<script>export default { async setup() { return { data: await fetch(...) }; } };</script>

---

Visual

Suspense Flow

┌────────────────────────────────────────────────────────────┐
│  SUSPENSE BOUNDARY                                         │
│                                                            │
│  ┌──────────────────────────────────────────────────┐     │
│  │  RENDER                                            │     │
│  │    <Suspense>                                      │     │
│  │      <AsyncA />  ← pending                         │     │
│  │      <AsyncB />  ← pending                         │     │
│  │    </Suspense>                                     │     │
│  └────────────────────────┬─────────────────────────┘     │
│                           │                                │
│                           v                                │
│  ┌──────────────────────────────────────────────────┐     │
│  │  FALLBACK RENDERED                                 │     │
│  │    <PageLoader />                                  │     │
│  └────────────────────────┬─────────────────────────┘     │
│                           │                                │
│                           v                                │
│  ┌──────────────────────────────────────────────────┐     │
│  │  AsyncA resolves                                   │     │
│  │  AsyncB resolves                                   │     │
│  │  Both ready → default slot renders                 │     │
│  └────────────────────────┬─────────────────────────┘     │
│                           │                                │
│                           v                                │
│  ┌──────────────────────────────────────────────────┐     │
│  │  CONTENT RENDERED                                  │     │
│  │    <AsyncA />  ← resolved                          │     │
│  │    <AsyncB />  ← resolved                          │     │
│  └──────────────────────────────────────────────────┘     │
│                                                            │
│  The fallback is replaced, not appended.                   │
└────────────────────────────────────────────────────────────┘

Nested Boundaries

┌────────────────────────────────────────────────────────────┐
│  NESTED SUSPENSE: PROGRESSIVE REVEAL                       │
│                                                            │
│  <Suspense>  ← outer boundary                              │
│    <AsyncLayout>                                           │
│      <Suspense>  ← inner boundary                          │
│        <AsyncSidebar />                                    │
│        <template #fallback><SidebarSkeleton /></template>  │
│      </Suspense>                                           │
│      <Suspense>  ← inner boundary                          │
│        <AsyncContent />                                    │
│        <template #fallback><ContentSkeleton /></template>  │
│      </Suspense>                                           │
│    </AsyncLayout>                                          │
│    <template #fallback><PageLoader /></template>           │
│  </Suspense>                                               │
│                                                            │
│  TIMELINE                                                  │
│  ──────────────────────────────────────────────            │
│  t=0     PageLoader shows                                  │
│  t=200   AsyncLayout resolves → layout appears             │
│  t=250   SidebarSkeleton shows, ContentSkeleton shows      │
│  t=400   AsyncSidebar resolves → sidebar appears           │
│  t=500   AsyncContent resolves → content appears           │
│                                                            │
│  Each boundary resolves independently.                     │
└────────────────────────────────────────────────────────────┘

Suspense vs Manual

┌────────────────────────────────────────────────────────────┐
│  MANUAL vs SUSPENSE                                        │
│                                                            │
│  MANUAL                                                    │
│  ┌──────────────────────────────────────────────────┐     │
│  │  const loading = ref(true);                       │     │
│  │  const data = ref(null);                          │     │
│  │  onMounted(async () => {                          │     │
│  │    data.value = await fetch(...);                 │     │
│  │    loading.value = false;                         │     │
│  │  });                                              │     │
│  │                                                   │     │
│  │  <Spinner v-if="loading" />                       │     │
│  │  <Content v-else :data="data" />                  │     │
│  └──────────────────────────────────────────────────┘     │
│  Each component manages its own loading state.             │
│                                                            │
│  SUSPENSE                                                  │
│  ┌──────────────────────────────────────────────────┐     │
│  │  const data = await fetch(...);                   │     │
│  │                                                   │     │
│  │  <Suspense>                                       │     │
│  │    <AsyncContent />                               │     │
│  │    <template #fallback><Spinner /></template>     │     │
│  │  </Suspense>                                      │     │
│  └──────────────────────────────────────────────────┘     │
│  The boundary manages the loading state.                   │
│  Multiple async components share one fallback.             │
└────────────────────────────────────────────────────────────┘

Error Boundary

┌────────────────────────────────────────────────────────────┐
│  SUSPENSE AND ERRORS                                       │
│                                                            │
│  Suspense handles PENDING. It does NOT handle ERRORS.      │
│                                                            │
│  ┌──────────────────────────────────────────────────┐     │
│  │  <ErrorBoundary>  ← onErrorCaptured               │     │
│  │    <Suspense>                                     │     │
│  │      <AsyncProfile />                             │     │
│  │      <template #fallback><Spinner /></template>   │     │
│  │    </Suspense>                                    │     │
│  │  </ErrorBoundary>                                 │     │
│  └──────────────────────────────────────────────────┘     │
│                                                            │
│  Pending → Suspense shows the fallback                     │
│  Error   → onErrorCaptured catches it                      │
│  Success → Content renders                                 │
│                                                            │
│  The two mechanisms are separate and complementary.        │
└────────────────────────────────────────────────────────────┘

---

Summary

Item	Value
<Suspense>	Boundary for async components
#default slot	The async content
#fallback slot	The pending UI
pending event	Boundary enters pending state
resolve event	Default slot renders
fallback event	Fallback slot renders
Async setup	async setup() or top-level await
onErrorCaptured	Catches errors from the subtree
Nested boundaries	Progressive reveal
Suspense status	Experimental in Vue 3, stable in practice

Key takeaways:

• <Suspense> is a rendering boundary, not a data-fetching library. It catches the pending state of async components inside it and shows the fallback until all of them resolve. The components must signal their pending state by awaiting in setup.
• One boundary, one fallback. Multiple async components inside the same boundary share a single loading state. This avoids the per-component spinner pattern and the layout shifts that come with it.
• Async setup is the mechanism. A component with a top-level await in <script setup>, or an async setup() function, is an async component. Suspense waits for it to resolve.
• Nested boundaries enable progressive reveal. The outer boundary shows a page-level loader. Once the layout resolves, inner boundaries show their own fallbacks while the sidebar and content load independently.
• Suspense does not handle errors. Errors propagate to onErrorCaptured or to the global error handler. The two mechanisms are complementary: Suspense for pending, error boundary for failure.
• Composables return Promises for Suspense. A composable that returns a Promise the component awaits integrates cleanly with Suspense. The composable handles caching and revalidation, and the component awaits the result.
• Suspense coordinates; manual loading is more granular. Suspense is the right choice when a page should show one loading state for a group of components. Manual loading is the right choice when each component’s loading state is independent and the UI needs fine-grained control.
• Suspense is documented as experimental. The API is stable in practice, and it is used widely, but the Vue team reserves the right to make minor adjustments. The core behavior is unlikely to change.

Remember: <Suspense> is the Vue 3 mechanism for coordinating async rendering. It renders a fallback while its async children are pending and replaces the fallback with the content once they resolve. A component becomes async by awaiting in its setup, and Suspense waits for the Promise. Multiple async components share a single fallback, which eliminates the per-component loading UI and the layout shifts it causes. Nested boundaries allow progressive reveal. Errors are handled separately by onErrorCaptured. The result is a page that shows one loading state, transitions cleanly to the loaded state, and keeps the layout stable throughout.

---

---

Stop using slow, ad-bloated tool sites! 🤮

🔎 Search “KandZ Tools” on Google to use many professional utilities for free.

KandZ.me is the ultimate minimalist hub for:
✅ Finance (Mortgage, Interest, Inflation)
✅ Tech (Base64, JSON, Dev Suite, IP)
✅ Health (BMI, BMR, TDEE)
✅ Productivity (Timer, Workspace, QR)

⚡️ Fast & Private
🔒 No data leaves your device
💎 100% Free

🔗 Use it now: https://tools.kandz.me
🔖 Bookmark it—you’ll need it later!