Async Components

Before understanding Async Components, let’s first understand the word async.

Async is short for asynchronous.

Synchronous (normal way)

In synchronous execution:

• Tasks happen one after another
• The next task waits until the previous one finishes

Example:

1. Load user profile
2. Load dashboard
3. Show page

If step 1 takes 5 seconds, everything waits for it.

Asynchronous (async way)

In asynchronous execution:

• Tasks can run independently
• Long tasks don’t block the rest of the app

Example:

1.Start loading user profile
2. Show page immediately
3. Update UI when profile is ready

This makes applications faster and more responsive.

What are Async Components?

Async Components are components that are loaded only when they are needed, instead of loading everything at once.

In async component loading:

• Heavy or less important components load later
• Only when they are actually required
• Faster initial load
• Load only what is needed

This is very important for large applications.

When Should You Use Async Components?

You should use async components when:

• The component is heavy
• The component is not used immediately
• The component is used only on certain pages
• The component is shown after a user action (click, route change, modal open)

Examples:

• Modal popups
• Charts
• Report pages

What is defineAsyncComponent?

Definition

defineAsyncComponent is a Vue function that allows you to define a component that will be loaded asynchronously.

Syntax

import { defineAsyncComponent } from 'vue'

Then:

constMyAsyncComponent = defineAsyncComponent(() =>
    import('./MyComponent.vue')
)

Let’s understand this line:

defineAsyncComponent(() =>import('./MyComponent.vue'))

Step-by-Step Explanation

1. import('./MyComponent.vue')
   • This is a dynamic import
   • It tells JavaScript:“Load this file only when required”
2. () => import(...)
   • This is a function that returns a Promise
   • Vue waits for the component to load
3. defineAsyncComponent()
   • Vue wraps the import
   • Handles loading, error, timeout, retry, etc.

Basic Async Component Example

Step 1: Create a Component

Tech.vue

<template>
  <h2>Hello Tech AI! I am an async component</h2>
</template>

---

Step 2: Load It Asynchronously

App.vue

<script setup>
import { defineAsyncComponent } from 'vue'

const Tech = defineAsyncComponent(() =>
  import('./Tech.vue')
)
</script>

<template>
  <Tech />
</template>

What Happens Here?

• Vue does NOT load Tech.vue immediately
• It loads it only when <Tech /> is rendered

Async Components in Routing (Bonus)

Vue Router also uses async components:

const routes = [
  {
      path:'/dashboard',
      component:() =>import('./Dashboard.vue')
  }
]

This is the same concept, just applied to routes.

Common Mistakes Beginners Make

❌ Importing normally instead of async

import MyComponentfrom './MyComponent.vue'// Not async

✅ Correct way:

defineAsyncComponent(() =>import('./MyComponent.vue'))

---

Key Takeaways (Very Important)

• Async components improve performance
• They reduce initial load time
• defineAsyncComponent is used in Vue 3
• Ideal for large or rarely used components
• Easy to implement and very powerful

Final Summary

In simple words:

Async Components allow Vue to load components only when they are needed, instead of loading everything at once.

defineAsyncComponent helps:

• Lazy load components
• Show loading UI
• Handle errors
• Improve user experience

If you are building any real-world Vue app, async components are a must-know concept, especially for performance optimization.

For more insightful tutorials, visit our Tech Blogs and explore the latest in Laravel, AI, and Vue.js development