Lazy loading components in Vue - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a lazy loaded Vue component is used?

Consider a Vue 3 app using defineAsyncComponent to lazy load a component. What is the user experience when the component is first rendered?

Vue

import { defineAsyncComponent } from 'vue';
const LazyComp = defineAsyncComponent(() => import('./LazyComp.vue'));

export default {
  components: { LazyComp },
  template: `<LazyComp />`
};

A The component is loaded immediately when the app starts, no loading state is shown.

B The component is loaded only when it is about to be displayed, showing a loading state if specified.

C The component is never loaded unless manually triggered by a method call.

D The component is loaded but rendered as empty until the user clicks on it.

💡 Hint

Think about what lazy loading means for user experience and network requests.

Lazy loading means the component code is fetched only when needed, not at app start. Vue shows a loading state if configured while waiting.

📝 Syntax

intermediate

Which option correctly lazy loads a Vue component with a loading placeholder?

Choose the correct syntax to lazy load a component with a loading message shown during load.

A const AsyncComp = defineAsyncComponent({ loader: () => import('./Comp.vue'), loading: '<p>Loading...</p>' });

B const AsyncComp = defineAsyncComponent(() => import('./Comp.vue'), { loadingComponent: { template: '<p>Loading...</p>' } });

C const AsyncComp = defineAsyncComponent({ loader: () => import('./Comp.vue'), loadingComponent: { template: '<p>Loading...</p>' } });

D const AsyncComp = defineAsyncComponent(() => import('./Comp.vue'), { loading: '<p>Loading...</p>' });

💡 Hint

Check the official Vue 3 syntax for defineAsyncComponent options.

The defineAsyncComponent function accepts an options object with a loader function and a loadingComponent component to show while loading.

🔧 Debug

advanced

Why does this lazy loaded component fail to render?

Given this code, the lazy loaded component never appears and no error shows. What is the cause?

Vue

import { defineAsyncComponent } from 'vue';

const LazyComp = defineAsyncComponent(() => import('./LazyComp.vue'));

export default {
  components: { LazyComp },
  template: `<LazyComp />`
};

A The component tag in the template is lowercase <lazycomp />, but Vue component names are case-sensitive and should be <LazyComp />.

B The import path './LazyComp.vue' is incorrect and should be './lazycomp.vue'.

C The defineAsyncComponent function requires a loadingComponent option to render anything.

D The component is missing a setup() function, so it cannot render.

💡 Hint

Vue component names in templates are case-sensitive and must match registration.

Vue treats component names as case-sensitive in templates. Using <lazycomp /> does not match LazyComp registration, so it renders nothing.

❓ state_output

advanced

What is the output when a lazy loaded component fails to load?

If a lazy loaded component's import fails (e.g., network error), what happens if no error handling is set?

Vue

import { defineAsyncComponent } from 'vue';

const LazyComp = defineAsyncComponent(() => import('./MissingComp.vue'));

export default {
  components: { LazyComp },
  template: `<LazyComp />`
};

A The app falls back to rendering a default slot content.

B The app shows a default error message automatically.

C The app retries loading the component indefinitely.

D The app throws an unhandled error and the component area remains blank.

💡 Hint

Consider what happens if no errorComponent or error handling is provided.

Without an errorComponent or error handler, Vue throws an unhandled error and the lazy component area stays empty.

🧠 Conceptual

expert

Why use lazy loading for Vue components in large apps?

Select the best reason why lazy loading components improves large Vue app performance.

A It reduces the initial bundle size by loading components only when needed, speeding up app start time.

B It automatically caches all components in memory to avoid network requests.

C It compiles components on the client side to improve rendering speed.

D It forces all components to load in parallel, reducing total load time.

💡 Hint

Think about how loading fewer files upfront affects app startup.

Lazy loading splits code so only needed parts load initially, making the app start faster and reducing bandwidth.

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