Async components for lazy loading in Vue - Step-by-Step Execution

Concept Flow - Async components for lazy loading

Start Vue app

↓

Render parent component

↓

Encounter async component

↓

Load component code asynchronously

↓

Show loading state (optional)

↓

Component code loaded

↓

Render async component

↓

User interacts with component

↓

App continues

Vue app starts and renders a parent component. When it meets an async component, it loads it in the background, optionally shows a loading message, then renders the component once loaded.

Execution Sample

Vue

import { defineAsyncComponent } from 'vue';

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

export default {
  components: { AsyncComp },
  template: '<AsyncComp />'
}

Defines an async component that loads MyComp.vue lazily and uses it in the template.

Execution Table

Step	Action	Component State	Output/Render
1	Start Vue app	No components loaded	Blank or root app shell
2	Render parent component	Parent ready	Parent template rendered
3	Encounter AsyncComp	AsyncComp not loaded	Show loading placeholder (if any)
4	Begin loading MyComp.vue asynchronously	Loading in progress	Loading indicator visible
5	MyComp.vue loaded	AsyncComp ready	AsyncComp rendered with MyComp content
6	User interacts with AsyncComp	AsyncComp active	Component responds to user
7	App continues running	All components loaded	Full UI interactive

💡 Async component finishes loading and renders, no more loading steps.

Variable Tracker

Variable	Start	After Step 3	After Step 5	Final
AsyncComp state	not loaded	loading	loaded	loaded

Key Moments - 3 Insights

Why do we see a loading placeholder before the component appears?

Because the async component code is still being fetched (see execution_table step 4), Vue shows a loading state to keep the UI responsive.

What happens if the async component fails to load?

Vue can show an error component or fallback UI if loading fails, but in this trace, loading succeeds at step 5.

Is the async component code included in the main bundle initially?

No, it is loaded separately on demand (step 4), which helps reduce initial app size.

Visual Quiz - 3 Questions

Look at the execution table, what is the AsyncComp state at step 4?

A loading

B loaded

C not loaded

D error

💡 Hint

Check the 'Component State' column at step 4 in the execution_table.

At which step does the async component finish loading and render?

A Step 3

B Step 4

C Step 5

D Step 6

💡 Hint

Look for when 'AsyncComp rendered' appears in the 'Output/Render' column.

If we remove the loading placeholder, what changes in the execution table?

A Step 5 would be skipped

B Step 3 output would be blank instead of loading placeholder

C AsyncComp would load faster

D Parent component would not render

💡 Hint

Focus on the 'Output/Render' column at step 3 in the execution_table.

Concept Snapshot

Async components in Vue let you load parts of your app only when needed.
Use defineAsyncComponent with a dynamic import.
Vue shows a loading state while fetching the code.
Once loaded, Vue renders the component normally.
This improves app speed by reducing initial load size.

Full Transcript

This visual trace shows how Vue handles async components for lazy loading. The app starts and renders the parent component. When it encounters an async component, Vue starts loading its code in the background. During loading, a placeholder or loading message can appear to keep the UI responsive. Once the component code finishes loading, Vue renders the async component normally. The variable tracker shows the async component state changing from not loaded to loading to loaded. Key moments clarify why loading placeholders appear and how lazy loading reduces initial bundle size. The quiz tests understanding of component states and rendering steps. This helps beginners see how Vue loads components only when needed, improving app performance.

Practice

1. What is the main purpose of using defineAsyncComponent in Vue?

easy

A. To load a component only when it is needed, improving app performance

B. To define a component that updates automatically on data change

C. To create a component that runs only on the server side

D. To make a component that never re-renders after first load

Solution

1. Step 1: Understand what lazy loading means

   Lazy loading means loading something only when it is needed, not before.

2. Step 2: Connect lazy loading to defineAsyncComponent

   This function helps Vue load components only when they are required, saving resources.

3. Final Answer:

   To load a component only when it is needed, improving app performance -> Option A

4. Quick Check:

   Lazy loading = load on demand [OK]

Hint: Async components load only when needed, boosting speed [OK]

Common Mistakes:

• Thinking it updates components automatically
• Confusing with server-side rendering
• Believing it prevents re-renders forever

2. Which of the following is the correct syntax to create an async component in Vue 3?

easy

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

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

C. const AsyncComp = defineComponent(async () => import('./MyComp.vue'))

D. const AsyncComp = createAsyncComponent('./MyComp.vue')

Solution

1. Step 1: Recall the Vue 3 async component syntax

   Vue 3 uses defineAsyncComponent with a function returning an import promise.

2. Step 2: Match the syntax with options

   const AsyncComp = defineAsyncComponent(() => import('./MyComp.vue')) matches the correct pattern: defineAsyncComponent(() => import('...')).

3. Final Answer:

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

4. Quick Check:

   Correct async syntax = defineAsyncComponent + import [OK]

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

Common Mistakes:

• Using async arrow function without defineAsyncComponent
• Using defineComponent instead of defineAsyncComponent
• Calling a non-existent createAsyncComponent function

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

const AsyncComp = defineAsyncComponent(() => new Promise(resolve => {
  setTimeout(() => resolve({ template: '
Loaded!
' }), 2000)
}))

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

medium

A. Loading... (fallback content) for 2 seconds, then Loaded!

B. Loaded! immediately without delay

C. Nothing renders until the component loads

D. An error because Suspense cannot be used with async components

Solution

1. Step 1: Understand Suspense fallback behavior

   Suspense shows fallback content while async component loads.

2. Step 2: Analyze the async component delay

   The component resolves after 2 seconds, so fallback shows first.

3. Final Answer:

   Loading... (fallback content) for 2 seconds, then Loaded! -> Option A

4. Quick Check:

   Suspense fallback shows during async load [OK]

Hint: Suspense fallback shows until async component resolves [OK]

Common Mistakes:

• Expecting immediate component render
• Thinking nothing shows during loading
• Believing Suspense cannot wrap async components

4. Identify the error in this async component usage:

import { defineAsyncComponent } from 'vue'

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

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

medium

A. Async component must be registered globally, not locally

B. The template uses instead of self-closing

C. Missing Suspense wrapper to handle loading state

D. The import path './MyComp.vue' is invalid syntax

Solution

1. Step 1: Check async component usage rules

   Async components should be wrapped in <Suspense> to show fallback during loading.

2. Step 2: Analyze the given code

   The code lacks a <Suspense> wrapper, so no loading state is handled.

3. Final Answer:

   Missing Suspense wrapper to handle loading state -> Option C

4. Quick Check:

   Async components need Suspense for loading fallback [OK]

Hint: Always wrap async components in Suspense for loading UI [OK]

Common Mistakes:

• Thinking self-closing tags are mandatory
• Believing async components must be global
• Assuming import path syntax is wrong

5. You want to lazy load two components, CompA and CompB, but only show CompB after CompA finishes loading. How can you achieve this using Vue async components and Suspense?

hard

A. Wrap CompA in Suspense, and inside its default slot, include CompB as a normal component

B. Use defineAsyncComponent for both, wrap both in a single Suspense, and use v-if to show CompB only after CompA loads

C. Load both components with defineAsyncComponent and render them side by side without Suspense

D. Wrap CompA in a Suspense with fallback, then in CompA's mounted hook, render CompB inside another Suspense

Solution

1. Step 1: Understand the loading order requirement

   You want CompB to appear only after CompA finishes loading.

2. Step 2: Use sequential triggering with lifecycle

   Wrap CompA in Suspense; in CompA's mounted hook, dynamically render CompB (async) inside its own Suspense for true sequential loading.

3. Step 3: Why other options fail

   Wrapping both in a single Suspense loads them in parallel (shows both after slowest finishes); loading side-by-side without Suspense skips fallback and loads parallel; including normal CompB in CompA's default slot loads it immediately upon CompA resolution.

4. Final Answer:

   Wrap CompA in a Suspense with fallback, then in CompA's mounted hook, render CompB inside another Suspense -> Option D

5. Quick Check:

   Sequential async = trigger next in mounted [OK]

Hint: Trigger next async component in mounted hook for sequential loading [OK]

Common Mistakes:

• Using single Suspense for parallel loading
• Skipping Suspense for async components
• Treating second component as normal (non-async)