Async components for lazy loading in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

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

Vue

import { defineAsyncComponent } from 'vue';

const AsyncComp = [1](() => import('./MyComponent.vue'));

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

AcreateAsyncComponent

BdefineAsyncComponent

CasyncComponent

DloadAsyncComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent function like createAsyncComponent.

Trying to import the component directly without wrapping.

Vue provides defineAsyncComponent to create async components for lazy loading.

2fill in blank

medium

Complete the code to register the async component in the components option.

Vue

export default {
  components: {
    AsyncComp: [1]
  }
};

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

AAsyncComp()

BimportAsyncComp

CAsyncComp

DdefineAsyncComponent

Attempts:

3 left

💡 Hint

Common Mistakes

Adding parentheses which calls the component instead of referencing it.

Using the import function name instead of the component variable.

When registering components, use the component variable name without parentheses.

3fill in blank

hard

Fix the error in the async component import syntax.

Vue

const AsyncComp = defineAsyncComponent(() => [1]('./MyComponent.vue'));

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

Aimport

Brequire

Cfetch

Dload

Attempts:

3 left

💡 Hint

Common Mistakes

Using require which is not supported in ES modules.

Using fetch which is for network requests, not module imports.

Dynamic import is used to lazy load components in Vue async components.

4fill in blank

hard

Fill both blanks to add a loading component and error component to the async component options.

Vue

const AsyncComp = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  loadingComponent: [1],
  errorComponent: [2]
});

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

ALoadingSpinner

BErrorMessage

CMyComponent

DAsyncComp

Attempts:

3 left

💡 Hint

Common Mistakes

Using the main component itself as loading or error component.

Using the async component variable name instead of actual components.

You can specify components to show while loading or on error by setting loadingComponent and errorComponent.

5fill in blank

hard

Fill all three blanks to create an async component with delay, timeout, and custom error component.

Vue

const AsyncComp = defineAsyncComponent({
  loader: () => import('./MyComponent.vue'),
  delay: [1],
  timeout: [2],
  errorComponent: [3]
});

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

A300

B5000

CErrorMessage

DLoadingSpinner

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing delay and timeout values.

Using loading component as error component.

Delay and timeout are numbers in milliseconds. The errorComponent is a Vue component to show on failure.