Async Components

Overview

Here is a high level overview of what has changed:

  • New defineAsyncComponent helper method that explicitly defines async components
  • component option renamed to loader
  • Loader function does not inherently receive resolve and reject arguments and must return a Promise

For a more in-depth explanation, read on!

Introduction

Previously, async components were created by simply defining a component as a function that returned a promise, such as:

  1. const asyncPage = () => import('./NextPage.vue')

Or, for the more advanced component syntax with options:

  1. const asyncPage = {
  2.   component: () => import('./NextPage.vue'),
  3.   delay: 200,
  4.   timeout: 3000,
  5.   error: ErrorComponent,
  6.   loading: LoadingComponent
  7. }

3.x Syntax

Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new defineAsyncComponent helper:

  1. import { defineAsyncComponent } from 'vue'
  2. import ErrorComponent from './components/ErrorComponent.vue'
  3. import LoadingComponent from './components/LoadingComponent.vue'
  5. // Async component without options
  6. const asyncPage = defineAsyncComponent(() => import('./NextPage.vue'))
  8. // Async component with options
  9. const asyncPageWithOptions = defineAsyncComponent({
  10.   loader: () => import('./NextPage.vue'),
  11.   delay: 200,
  12.   timeout: 3000,
  13.   errorComponent: ErrorComponent,
  14.   loadingComponent: LoadingComponent
  15. })

Another change that has been made from 2.x is that the component option is now renamed to loader in order to accurately communicate that a component definition cannot be provided directly.

  1. import { defineAsyncComponent } from 'vue'
  3. const asyncPageWithOptions = defineAsyncComponent({
  4.   loader: () => import('./NextPage.vue'),
  5.   delay: 200,
  6.   timeout: 3000,
  7.   error: ErrorComponent,
  8.   loading: LoadingComponent
  9. })

In addition, unlike 2.x, the loader function no longer receives the resolve and reject arguments and must always return a Promise.

  1. // 2.x version
  2. const oldAsyncComponent = (resolve, reject) => {
  3.   /* ... */
  4. }
  6. // 3.x version
  7. const asyncComponent = defineAsyncComponent(
  8.   () =>
  9.     new Promise((resolve, reject) => {
  10.       /* ... */
  11.     })
  12. )

For more information on the usage of async components, see: