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.

Practice

1. What is the main benefit of lazy loading components in Vue?

easy

A. It automatically fixes bugs in components.

B. It makes components load faster by preloading all at once.

C. It speeds up the initial loading time by loading components only when needed.

D. It disables components until the user clicks a button.

Solution

1. Step 1: Understand lazy loading purpose

   Lazy loading means loading parts of the app only when needed, not all at once.

2. Step 2: Identify benefit in Vue context

   Loading components only when needed reduces initial load time, making app start faster.

3. Final Answer:

   It speeds up the initial loading time by loading components only when needed. -> Option C

4. Quick Check:

   Lazy loading = faster start [OK]

Hint: Lazy loading delays loading until needed to speed start [OK]

Common Mistakes:

• Thinking lazy loading loads all components at once
• Confusing lazy loading with bug fixing
• Assuming lazy loading disables components

2. Which is the correct way to define a lazy loaded component in Vue using defineAsyncComponent?

easy

A. const MyComp = async import('./MyComp.vue')

B. const MyComp = import('./MyComp.vue')

C. const MyComp = defineComponent('./MyComp.vue')

D. const MyComp = defineAsyncComponent(() => import('./MyComp.vue'))

Solution

1. Step 1: Recall syntax for lazy loading

   Vue uses defineAsyncComponent with a function returning import() to lazy load.

2. Step 2: Match correct syntax

   const MyComp = defineAsyncComponent(() => import('./MyComp.vue')) correctly wraps import in a function passed to defineAsyncComponent.

3. Final Answer:

   const MyComp = defineAsyncComponent(() => import('./MyComp.vue')) -> Option D

4. Quick Check:

   defineAsyncComponent + () => import() = correct [OK]

Hint: Use defineAsyncComponent with arrow function returning import [OK]

Common Mistakes:

• Using import directly without wrapping in a function
• Confusing defineComponent with defineAsyncComponent
• Using async keyword incorrectly with import

3. Given this Vue code snippet, what will be rendered initially?

const AsyncComp = defineAsyncComponent(() => import('./AsyncComp.vue'))

export default {
  components: { AsyncComp },
  template: ``
}

medium

A. Nothing renders until AsyncComp finishes loading.

B. The AsyncComp content immediately without delay.

C. An error message because Suspense is not supported.

D. A loading fallback inside Suspense until AsyncComp loads.

Solution

1. Step 1: Understand Suspense behavior

   Suspense shows fallback content only if #fallback slot is provided; otherwise nothing renders while waiting for async components.

2. Step 2: Analyze initial render

   The code provides only default slot, no fallback slot, so nothing renders until AsyncComp resolves.

3. Final Answer:

   Nothing renders until AsyncComp finishes loading. -> Option A

4. Quick Check:

   Suspense no fallback = nothing renders [OK]

Hint: Suspense without fallback renders nothing during lazy load [OK]

Common Mistakes:

• Assuming Suspense shows loading fallback without #fallback slot
• Assuming lazy component renders instantly
• Thinking Suspense is unsupported in Vue 3

4. What is wrong with this lazy loading code snippet?

const AsyncComp = defineAsyncComponent(import('./AsyncComp.vue'))

medium

A. The import call is not wrapped in a function, causing immediate loading.

B. defineAsyncComponent cannot be used with import at all.

C. The import path must be absolute, not relative.

D. Async components must be registered globally, not locally.

Solution

1. Step 1: Check defineAsyncComponent usage

   It requires a function returning import(), not the import promise directly.

2. Step 2: Identify error cause

   Passing import() directly triggers immediate loading, breaking lazy loading.

3. Final Answer:

   The import call is not wrapped in a function, causing immediate loading. -> Option A

4. Quick Check:

   Wrap import in function for lazy loading [OK]

Hint: Always wrap import in a function for defineAsyncComponent [OK]

Common Mistakes:

• Passing import() directly without function
• Thinking import path must be absolute
• Believing async components must be global

5. You want to lazy load two components, CompA and CompB, but only show CompB after CompA finishes loading and rendering. Which approach correctly achieves this?

hard

A. Import both components normally without lazy loading and use v-if to show CompB after CompA.

B. Use two Suspense components, render CompA inside first Suspense, then conditionally render CompB after CompA loads.

C. Load both components with defineAsyncComponent and render them together inside one Suspense.

D. Lazy load CompB inside CompA component's setup function.

Solution

1. Step 1: Understand sequential lazy loading need

   We want CompB to appear only after CompA fully loads and renders.

2. Step 2: Use Suspense and conditional rendering

   Wrap CompA in Suspense to handle loading, then show CompB conditionally after CompA is ready.

3. Final Answer:

   Use two Suspense components, render CompA inside first Suspense, then conditionally render CompB after CompA loads. -> Option B

4. Quick Check:

   Sequential lazy load needs Suspense + conditional render [OK]

Hint: Use Suspense + conditional render for sequential lazy components [OK]

Common Mistakes:

• Rendering both lazy components together without order control
• Not using Suspense for loading states
• Trying to lazy load inside setup without Suspense