Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to create async components that have its own loading and error components to go with it.

Creating Async Components with Apps Created with Vue CLI

Vue apps created with Vue CLI has built-in support for dynamic imports, which is what we need to create an async component.

Dynamic imports are async. Therefore, we need components to display something when the component is loading. Also, we need another component to display something in case there’s an error loading the component.

When we register an async component, we also have to register components that are used when the async component is loading and when there’s an error.

To create the components and register them, we can write the following code:

components/AsyncComponent.vue :

<template>  
  <p>Async Component</p>  
</template>

components/AsyncError.vue :

<template>  
  <p>Error</p>  
</template>

components/AsyncLoading.vue :

<template>  
  <p>Loading</p>  
</template>

App.vue :

<template>  
  <div id="app">  
    <async-component></async-component>  
  </div>  
</template>

<script>  
import AsyncError from "./components/AsyncError.vue";  
import AsyncLoading from "./components/AsyncLoading.vue";  
const AsyncComponent = import("./components/AsyncComponent.vue");

export default {  
  name: "App",  
  components: {  
    AsyncComponent: () => ({  
      component: AsyncComponent,  
      loading: AsyncLoading,  
      error: AsyncError,  
      delay: 100,  
      timeout: 3000  
    })  
  }  
};  
</script>

As we can see from the code above, we register an async component differently than registering a regular Vue component.

To register an async component, the property name is the component name as usual, but the value is an arrow function that returns an object with several properties.

The import function loads the async component from a different bundle than the ones that are statically imported, so we don’t want to waste time when the app first loads waiting for the async components to load.

The component property has the component to load. loading is the component that’s displayed when loading the async component, error is the component that’s displayed when there’s an error. delay is the delay before the component is shown. timeout is when Vue stops trying to load the async component and displays the error component.

delay and timeout are measured in milliseconds.

We then load the async component like any other component. Then when we load the async component, we’ll see Loading and then the async component displayed.

Conclusion

Async components let us create a component with a loading stater and error state so that we can see something while the async component is loading. It’s useful for code splitting as the async component is loaded only when it needs from a different bundle with the import function.