Suspense for async components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to wrap the async component with Suspense.

Vue

<template>
  <Suspense>
    <[1] />
    <template #fallback>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

Drag options to blanks, or click blank then click option'

ASuspense

Bdiv

Ctemplate

DAsyncComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Putting a regular HTML tag instead of the async component inside Suspense.

Not using Suspense at all.

The async component must be placed inside the Suspense tag to enable fallback content while loading.

2fill in blank

medium

Complete the code to define an async component using Vue's defineAsyncComponent.

Vue

<script setup>
import { defineAsyncComponent } from 'vue'
const AsyncComponent = defineAsyncComponent(() => import('./MyComponent.vue'))

const componentName = '[1]'
</script>

Drag options to blanks, or click blank then click option'

AAsyncComponent

BMyComponent

CdefineAsyncComponent

Dimport

Attempts:

3 left

💡 Hint

Common Mistakes

Using the file name or import keyword as the component variable.

Confusing the function name with the component variable.

The variable holding the async component is AsyncComponent, which you use in the template.

3fill in blank

hard

Fix the error in the Suspense fallback slot syntax.

Vue

<template>
  <Suspense>
    <AsyncComponent />
    <template [1]>
      <p>Loading...</p>
    </template>
  </Suspense>
</template>

Drag options to blanks, or click blank then click option'

Av-if

B#fallback

Cslot=fallback

Dfallback

Attempts:

3 left

💡 Hint

Common Mistakes

Using v-if instead of the fallback slot.

Using slot=fallback attribute which is invalid in Vue 3.

The correct syntax for the fallback slot in Vue Suspense is <template #fallback>.

4fill in blank

hard

Fill both blanks to create a Suspense with a timeout and error component.

Vue

<template>
  <Suspense :timeout=[1]>
    <AsyncComponent />
    <template #fallback>
      <LoadingSpinner />
    </template>
    <template #[2]>
      <ErrorMessage />
    </template>
  </Suspense>
</template>

Drag options to blanks, or click blank then click option'

A3000

Berror

Cfallback

D5000

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'fallback' as the error slot name.

Passing timeout as a string instead of a number.

The timeout prop expects a number in milliseconds (e.g., 3000). The error slot is named error to show error content.

5fill in blank

hard

Fill all three blanks to create a dictionary comprehension filtering async components by load time.

Vue

<script setup>
const components = {
  compA: defineAsyncComponent(() => import('./CompA.vue')),
  compB: defineAsyncComponent(() => import('./CompB.vue')),
  compC: defineAsyncComponent(() => import('./CompC.vue'))
}

const fastComponents = Object.entries(components).reduce((acc, [[1], comp]) => {
  if (comp.loadTime [2] 1000) acc[[3]] = comp
  return acc
}, {})
</script>

Drag options to blanks, or click blank then click option'

Aname

B<

Dkey

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'name' instead of 'key' for the first destructured variable.

Using wrong comparison operator like > instead of <.

When using Object.entries, the first element is the key (here named 'key'). We check if comp.loadTime < 1000 and assign to acc[key].