What is an async component?

VueJunior~1 min read

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?

Reducing bundle weight Large components (tables, charts, admin panels) can be loaded only where they're used.
Speeding up application load Less data → the application starts faster.
Lazy-loading pages / modules You can load a component only when navigating to a specific page.
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 +

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.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.