Suspense for async components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Vue Suspense component render initially?

Consider this Vue 3 component using <Suspense> with an async child component. What will the user see first when this component is mounted?

Vue

<template>
  <Suspense>
    <template #default>
      <AsyncChild />
    </template>
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncChild = defineAsyncComponent(() =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve({ template: '<p>Async content loaded</p>' })
    }, 2000)
  })
)
</script>

A The text 'Loading...' is shown immediately, then replaced by 'Async content loaded' after 2 seconds.

B The text 'Async content loaded' appears immediately without delay.

C Nothing is shown until the async component finishes loading after 2 seconds.

D An error message is displayed because async components cannot be used inside Suspense.

💡 Hint

Think about what the fallback slot in <Suspense> is for.

The <Suspense> component shows the fallback content immediately while waiting for the async component to load. Once loaded, it replaces the fallback with the async component's content.

❓ state_output

intermediate

What is the value of isPending during async component loading?

In Vue 3, when using defineAsyncComponent with Suspense, you can track loading state with isPending. What is the value of isPending while the async component is still loading?

Vue

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

const isPending = ref(false)

const AsyncComp = defineAsyncComponent({
  loader: () => new Promise(resolve => setTimeout(() => resolve({ template: '<p>Done</p>' }), 3000)),
  onPending() { isPending.value = true },
  onResolve() { isPending.value = false }
})
</script>

A null

B false

C undefined

D true

💡 Hint

Check what onPending does in defineAsyncComponent.

The onPending hook sets isPending to true when the async component starts loading. It stays true until the component resolves.

📝 Syntax

advanced

Which option correctly uses Suspense with multiple async components?

Given two async components AsyncA and AsyncB, which code snippet correctly uses <Suspense> to show a fallback while both load?

A

<Suspense>
  <template #default>
    <AsyncA />
    <AsyncB />
  </template>
  <template #fallback>
    <p>Loading both components...</p>
  </template>
</Suspense>

B

<Suspense>
  <AsyncA />
  <AsyncB />
  <template #fallback>
    <p>Loading both components...</p>
  </template>
</Suspense>

C

<Suspense fallback="<p>Loading both components...</p>">
  <AsyncA />
  <AsyncB />
</Suspense>

D

<Suspense>
  <template #fallback>
    <p>Loading both components...</p>
  </template>
  <AsyncA />
  <AsyncB />
</Suspense>

💡 Hint

Remember the correct slot names for Suspense fallback and default content.

The <Suspense> component requires the fallback content inside a named slot #fallback and the async components inside the default slot. Option A correctly uses both slots.

🔧 Debug

advanced

Why does this Suspense fallback never show?

Look at this Vue 3 code. The fallback slot content never appears even though the async component takes 3 seconds to load. Why?

Vue

<template>
  <Suspense>
    <AsyncComponent />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  new Promise(resolve => setTimeout(() => resolve({ template: '<p>Loaded</p>' }), 3000))
)
</script>

A The async component loads instantly, so fallback never shows.

B The fallback slot is ignored because the async component is not inside a default slot template.

C The fallback slot must be declared before the async component inside Suspense.

D Suspense requires a <SuspenseBoundary> wrapper to show fallback.

💡 Hint

Check how slots are structured inside Suspense.

Suspense expects async components inside the default slot. Here, <AsyncComponent /> is a direct child, not inside a <template #default>. So fallback is ignored and async component renders immediately when ready.

🧠 Conceptual

expert

How does Vue Suspense handle multiple async dependencies internally?

When a Vue Suspense component wraps multiple async components, how does it decide when to switch from fallback to default content?

A It renders each async component as soon as it resolves, replacing fallback piece by piece.

B It shows fallback until the first async component resolves, then switches to default content immediately.

C It waits for all async components inside the default slot to resolve before rendering the default content.

D It randomly picks one async component to wait for before switching from fallback.

💡 Hint

Think about the user experience when multiple async components load.

Vue Suspense waits for all async components inside the default slot to finish loading before replacing the fallback with the full default content. This ensures a smooth transition without partial content flashes.

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