Lazy loading components in Vue - Mini Project: Build & Apply

Lazy Loading Components in Vue

📖 Scenario: You are building a Vue app that shows different sections on demand. To make the app faster, you want to load each section only when the user needs it.

🎯 Goal: Build a Vue app that lazy loads two components: ProfileSection and SettingsSection. The app should load these components only when the user clicks buttons to show them.

📋 What You'll Learn

Create two simple Vue components: ProfileSection and SettingsSection

Set up a Vue app with buttons to show each section

Use Vue's lazy loading syntax with defineAsyncComponent to load components on demand

Display the chosen component when its button is clicked

💡 Why This Matters

🌍 Real World

Lazy loading components helps make web apps faster by loading only what the user needs, reducing initial load time.

💼 Career

Many modern Vue apps use lazy loading to improve performance and user experience, a valuable skill for frontend developers.

1

Create the two Vue components

Create two Vue components named ProfileSection.vue and SettingsSection.vue. Each should have a simple template with a <div> containing the text Profile Section Loaded and Settings Section Loaded respectively.

Vue

# Your code here



  




  

Hint

Each component needs a <template> with a <div> showing the exact text.

2

Set up the main Vue app with buttons

In App.vue, create two buttons with @click handlers named showProfile and showSettings. Also, add a data property called currentSection initialized to an empty string.

Vue

import { ref } from 'vue'

// Your code here



  Show Profile
  Show Settings
  

Hint

Use ref to create currentSection. Write two functions to update it when buttons are clicked.

3

Lazy load the components using defineAsyncComponent

In App.vue, import defineAsyncComponent from 'vue'. Create two constants ProfileSection and SettingsSection using defineAsyncComponent that load './ProfileSection.vue' and './SettingsSection.vue' respectively.

Vue

import { ref, defineAsyncComponent } from 'vue'

const currentSection = ref('')

// Your code here

function showProfile() {
  currentSection.value = 'profile'
}

function showSettings() {
  currentSection.value = 'settings'
}



  Show Profile
  Show Settings
  

Hint

Use defineAsyncComponent with arrow functions that import the components.

4

Display the lazy loaded component based on user choice

In the App.vue template, use <component :is="..." /> to show ProfileSection when currentSection is 'profile' and SettingsSection when it is 'settings'.

Vue

  Show Profile
  Show Settings
  

Hint

Use the <component> tag with :is binding to switch components based on currentSection.

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