Suggest an edit

Improve this article

Refine the answer for “What is an async component?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

An **async component** is a component that **does not load immediately**, but **on demand**, when it's actually needed.
That is, Vue does not include it in the main bundle but loads it dynamically.

In simpler terms:
**An async component is a lazily loaded component.**
It helps reduce the initial bundle size and speed up page load.

---

## Why do you need async components?

1. **Reducing bundle weight**
Large components (tables, charts, admin panels) can be loaded only where they're used.
2. **Speeding up application load**
Less data → the application starts faster.
3. **Lazy-loading pages / modules**
You can load a component only when navigating to a specific page.
4. **Improving performance on mobile devices**
Memory and CPU are used economically.

---

## How to create an async component in Vue 3?

Vue provides a function:

```javascript
defineAsyncComponent()
```

---

### A simple example (lazy import)

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

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

<template>
  <AsyncModal />
</template>
```

Now `Modal.vue` will only load when the component is actually used on the page.

---

## How does this work under the hood?

```javascript
import('./Modal.vue')
```

is a dynamic ES Modules import.

The browser creates a *separate chunk* (a piece of the bundle) and downloads it only on first use.

---

## Async component with a fallback (loading state)

Vue lets you specify:

- a placeholder component (loading)
- a timeout
- a component to show on error

Example:

```javascript
const AsyncModal = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorBlock,
  delay: 200,   // show the spinner after 200 ms
  timeout: 3000 // error if it takes longer than 3 seconds to load
})
```

Usage:

```javascript
<AsyncModal />
```

---

## Async components + <Suspense>

Vue 3 supports `<Suspense>`, which waits for async components.

Example:

```javascript
<Suspense>
  <template #default>
    <AsyncUserProfile />
  </template>

<template #fallback>
    <LoadingSpinner />
  </template>
</Suspense>
```

---

## Where are async components used most often?

#### Lazy-loading pages

```javascript
const PageHome = defineAsyncComponent(() => import('./pages/Home.vue'))
```

#### Modals and complex widgets

Tabs, tables, charts, code editors.

#### Admin panels

Huge components can be loaded in pieces.

#### Router (Vue Router)

```javascript
{
  path: '/dashboard',
  component: () => import('./views/Dashboard.vue')
}
```

---

## Summary (cheat sheet)

**An async component is a component that loads dynamically when needed.**

It's needed for:

- reducing bundle size
- speeding up application load
- optimizing heavy components
- lazy-loading pages

It's created with:

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

or with `<Suspense>` for loading with a fallback.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts425 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.