Lazy loading components in Vue - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import a component lazily in Vue.

Vue

const LazyComponent = [1](() => import('./LazyComponent.vue'))

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

AdefineAsyncComponent

BcreateApp

Cref

Dreactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using createApp instead of defineAsyncComponent

Trying to import component directly without lazy loading

Using ref or reactive which are for state, not components

Vue uses defineAsyncComponent to lazily load components.

2fill in blank

medium

Complete the code to register a lazy loaded component in the components option.

Vue

export default {
  components: {
    LazyComp: [1]
  }
}

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

ALazyComponent

BdefineAsyncComponent

Cimport('./LazyComponent.vue')

Dref

Attempts:

3 left

💡 Hint

Common Mistakes

Using defineAsyncComponent directly in components

Trying to import inside components option

Using ref which is unrelated

You register the lazy loaded component by its variable name, here LazyComponent.

3fill in blank

hard

Fix the error in the lazy loading import syntax.

Vue

const LazyComp = defineAsyncComponent(() => [1]('./LazyComp.vue'))

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

Arequire

Bload

Cimport

Dfetch

Attempts:

3 left

💡 Hint

Common Mistakes

Using require which is CommonJS, not ES modules

Using fetch which is for HTTP requests

Using load which is not a JavaScript keyword

Dynamic import uses the import function to load modules asynchronously.

4fill in blank

hard

Fill both blanks to create a lazy loaded component with a loading message.

Vue

const LazyComp = defineAsyncComponent({
  loader: () => import('./LazyComp.vue'),
  [1]: () => 'Loading...',
  [2]: 200
})

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

AloadingComponent

Bloading

Cdelay

Dtimeout

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'loading' instead of loadingComponent

Confusing timeout with delay

Providing plain string without proper component or h()

The loadingComponent option shows a component/message while loading, and delay sets how long to wait before showing it.

5fill in blank

hard

Fill all three blanks to create a lazy loaded component with error handling and timeout.

Vue

const LazyComp = defineAsyncComponent({
  loader: () => import('./LazyComp.vue'),
  [1]: () => import('./Loading.vue'),
  [2]: () => import('./Error.vue'),
  [3]: 3000
})

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

AloadingComponent

BerrorComponent

Ctimeout

Ddelay

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up loadingComponent and errorComponent

Using delay instead of timeout for max wait

Providing functions instead of components for loadingComponent or errorComponent

loadingComponent shows a component while loading, errorComponent shows on error, and timeout sets max wait time.