Suspense for async components in Vue - Mini Project: Build & Apply

Using Suspense for Async Components in Vue

📖 Scenario: You are building a Vue app that shows user profiles. The profile data loads slowly from the server. You want to show a loading message while the profile component is loading.

🎯 Goal: Create a Vue app that uses <Suspense> to show a loading message while an async profile component loads.

📋 What You'll Learn

Create a basic Vue app with a root component

Define an async component called UserProfile that simulates loading delay

Use a loadingMessage variable to show while loading

Wrap UserProfile inside <Suspense> with a fallback slot

Ensure the loading message shows until the async component is ready

💡 Why This Matters

🌍 Real World

Many web apps load parts of their UI asynchronously to improve speed and user experience. Using <code>&lt;Suspense&gt;</code> helps show loading states smoothly.

💼 Career

Understanding async components and suspense is important for frontend developers working with Vue to build responsive and user-friendly interfaces.

1

Create the async component UserProfile

Create an async component called UserProfile using defineAsyncComponent that simulates a 2-second delay before resolving. The component should render a <div> with the text User Profile Loaded.

Vue

// Create async component UserProfile here
// Your code here

Hint

Use defineAsyncComponent and return a Promise that resolves after 2 seconds with a simple template.

2

Add a loadingMessage variable

Inside the <script setup>, create a constant called loadingMessage and set it to the string 'Loading user profile...'.

Vue

import { defineAsyncComponent } from 'vue'

const UserProfile = defineAsyncComponent(() => new Promise(resolve => {
  setTimeout(() => {
    resolve({
      template: 'User Profile Loaded'
    })
  }, 2000)
}))

// Create loadingMessage variable here
// Your code here

Hint

Use const loadingMessage = 'Loading user profile...' to create the variable.

3

Use <Suspense> with fallback slot

In the <template>, add a <Suspense> component. Inside it, place the <UserProfile /> component. Add a <template #fallback> slot that displays the loadingMessage variable inside a <div>.

Vue

import { defineAsyncComponent } from 'vue'

const UserProfile = defineAsyncComponent(() => new Promise(resolve => {
  setTimeout(() => {
    resolve({
      template: 'User Profile Loaded'
    })
  }, 2000)
}))

const loadingMessage = 'Loading user profile...'

Hint

Wrap <UserProfile /> inside <Suspense>. Use <template #fallback> to show loadingMessage.

4

Complete the Vue app with import and registration

Add the import statement for Suspense from 'vue' inside <script setup>. Register UserProfile as a component by adding it to the components option in the <script setup> block.

Vue

// Import Suspense and register UserProfile component
// Your code here

import { defineAsyncComponent } from 'vue'

const UserProfile = defineAsyncComponent(() => new Promise(resolve => {
  setTimeout(() => {
    resolve({
      template: 'User Profile Loaded'
    })
  }, 2000)
}))

const loadingMessage = 'Loading user profile...'



  
    
      
    
    
      {{ loadingMessage }}
    
  

Hint

Import Suspense from 'vue' alongside defineAsyncComponent.

Practice

1. What is the main purpose of the <Suspense> component in Vue?

easy

A. To show fallback content while async components are loading

B. To handle errors in synchronous components

C. To style components with CSS

D. To manage global state across components

Solution

1. Step 1: Understand what async components do

   Async components load their code or data asynchronously, which can take some time.

2. Step 2: Role of <Suspense>

   The <Suspense> component shows fallback content during this loading time to improve user experience.

3. Final Answer:

   To show fallback content while async components are loading -> Option A

4. Quick Check:

   Suspense = fallback content during loading [OK]

Hint: Suspense shows a placeholder while waiting for async parts [OK]

Common Mistakes:

• Confusing Suspense with error handling
• Thinking Suspense manages CSS or styling
• Assuming Suspense manages global state

2. Which of the following is the correct way to use <Suspense> with a fallback in Vue?

easy

A. <Suspense><AsyncComp /><template fallback>Loading...</template></Suspense>

B. <Suspense fallback="Loading..."><AsyncComp /></Suspense>

C. <Suspense><template #fallback>Loading...</template><AsyncComp /></Suspense>

D. <Suspense><AsyncComp fallback="Loading..." /></Suspense>

Solution

1. Step 1: Check Vue Suspense syntax

   Vue uses a named slot #fallback inside <Suspense> to show fallback content.

2. Step 2: Validate the options

   <Suspense><template #fallback>Loading...</template><AsyncComp /></Suspense> correctly uses <template #fallback> with fallback text and wraps the async component inside Suspense.

3. Final Answer:

   <Suspense><template #fallback>Loading...</template><AsyncComp /></Suspense> -> Option C

4. Quick Check:

   Fallback slot syntax = <Suspense><template #fallback>Loading...</template><AsyncComp /></Suspense> [OK]

Hint: Use inside Suspense for fallback content [OK]

Common Mistakes:

• Trying to pass fallback as a prop
• Placing fallback template after async component
• Using incorrect slot name like 'fallback' without #

3. Given this Vue template:

<Suspense>
  <template #fallback>Loading...</template>
  <AsyncUser />
</Suspense>

What will the user see while AsyncUser is loading?

medium

A. The AsyncUser component will show partial content

B. Nothing will be shown until AsyncUser loads

C. An error message will appear

D. The text 'Loading...' will be shown

Solution

1. Step 1: Understand Suspense fallback behavior

   While the async component is loading, the fallback slot content is displayed.

2. Step 2: Identify fallback content

   The fallback slot contains the text 'Loading...', so this text appears during loading.

3. Final Answer:

   The text 'Loading...' will be shown -> Option D

4. Quick Check:

   Fallback slot content shows during loading = The text 'Loading...' will be shown [OK]

Hint: Fallback slot content appears while async component loads [OK]

Common Mistakes:

• Expecting no content during loading
• Thinking partial async component renders
• Confusing fallback with error message

4. What is wrong with this Vue Suspense usage?

<Suspense>
  <AsyncComp />
  <template fallback>Loading...</template>
</Suspense>

medium

A. Fallback content must be a component, not a template

B. The fallback template must use #fallback slot syntax

C. Suspense cannot wrap async components

D. AsyncComp must be wrapped in a div

Solution

1. Step 1: Check fallback slot syntax

   The fallback slot requires the named slot syntax #fallback inside <template>.

2. Step 2: Identify the error in code

   The code uses <template fallback> instead of <template #fallback>, which is invalid.

3. Final Answer:

   The fallback template must use #fallback slot syntax -> Option B

4. Quick Check:

   Fallback slot needs #fallback syntax = The fallback template must use #fallback slot syntax [OK]

Hint: Use not for fallback slot [OK]

Common Mistakes:

• Omitting the # in fallback slot
• Wrapping async component unnecessarily
• Thinking fallback must be a separate component

5. You want to show a loading spinner while two async components load in parallel inside Suspense. Which approach correctly shows fallback until both finish loading?

hard

A. <Suspense><template #fallback><Spinner /></template><AsyncComp1 /><AsyncComp2 /></Suspense>

B. <Suspense><AsyncComp1 /><template fallback><Spinner /></template><AsyncComp2 /></Suspense>

C. <Suspense><AsyncComp1 /><AsyncComp2 /></Suspense><template #fallback><Spinner /></template>

D. <Suspense><template #fallback><Spinner /></template><AsyncComp1 /></Suspense><Suspense><template #fallback><Spinner /></template><AsyncComp2 /></Suspense>

Solution

1. Step 1: Understand Suspense behavior with multiple async components

   A single Suspense wrapping multiple async components waits for all to load before showing content.

2. Step 2: Check fallback placement

   The fallback slot must be declared once inside Suspense before the async components to show fallback while any are loading.

3. Final Answer:

   <Suspense><template #fallback><Spinner /></template><AsyncComp1 /><AsyncComp2 /></Suspense> -> Option A

4. Quick Check:

   Single Suspense with fallback wraps all async components = <Suspense><template #fallback><Spinner /></template><AsyncComp1 /><AsyncComp2 /></Suspense> [OK]

Hint: Wrap all async components in one Suspense with fallback slot [OK]

Common Mistakes:

• Placing fallback after async components
• Using multiple Suspense components separately
• Putting fallback outside Suspense