Vue Tip: Effortless Handle Asynchronous Components With Suspense

In the world of modern web development, delivering seamless user experiences is of utmost importance. Asynchronous components, which load data or resources dynamically, play a crucial role in achieving this goal.

Vue 3 introduces an interesting feature called Suspense to effortlessly handle asynchronous components. You can use it to show a loading state while all async dependencies in the nested component tree are being resolved.

Without Suspense

For this article, let's use the following component hierarchy for demonstration purposes:

1<Dashboard>
2  ├─ <Profile> (async component)
3  └─ <FetchComponent> (component with async setup())

We have a Dashboard component that includes two child components:

• Profile: This component is loaded asynchronously
• FetchComponent: This component fetches data using async/await within <script setup>

Each of the child components has its loading state, they are visible if the component is loaded:

As you can imagine this can harm the user experience if you see multiple loading spinners on the page and content displayed at different times.

Let's take a look at how <Suspense> is trying to solve that problem.

With Suspense

The <Suspense> component enables us to display top-level loading & error states while waiting for nested async dependencies to be resolved:

1<template>
2  <Suspense>
3    <!-- Component with nested async dependencies -->
4    <Dashboard />
5
6    <!-- Loading state via #fallback slot -->
7    <template #fallback> Loading... </template>
8  </Suspense>
9</template>

<Suspense> has two slots: #default and #fallback. Both slots only allow for one immediate child node.

Our demo application now behaves this way using <Suspense>:

The <Suspense> component has two states: pending and resolve.

When <Suspense> is first rendered, it will display its default slot content in memory. If any asynchronous dependencies are encountered, it will transition to a pending state. While in the pending state, the fallback content will be shown. Once all the encountered asynchronous dependencies are resolved, <Suspense> enters a resolved state and displays the resolved default slot content.

If no async dependencies were encountered during the initial render, <Suspense> will directly go into a resolved state.