How to Define and Load Components Dynamically using AsyncComponent in the Vue Composition API – Vue 3

In Vue 3, the Composition API has been introduced as an alternative to the Options API for writing Vue components. One of the benefits of the Composition API is the ability to dynamically load components using the defineAsyncComponent function. This allows you to lazy-load components and improve the performance of your application by only loading components when they are needed.

In this tutorial, we will walk through how to use the defineAsyncComponent function in the Vue Composition API to load a component dynamically.

Prerequisites:

• Basic knowledge of Vue.js and the Composition API
• Vue 3 installed in your project

Step 1: Create a new Vue project
If you haven’t already, create a new Vue project using the Vue CLI by running the following command:

vue create vue-dynamic-components

Step 2: Create a new component
Create a new Vue component that we will load dynamically using the defineAsyncComponent function. Create a new file named DynamicComponent.vue in the src/components directory and add the following code:

<template>
  <div>
    <h1>This is a dynamic component!</h1>
  </div>
</template>

<script>
export default {
  name: 'DynamicComponent',
}
</script>

Step 3: Import defineAsyncComponent
In the parent component where we want to load the DynamicComponent, import the defineAsyncComponent function from Vue:

import { defineAsyncComponent } from 'vue'

Step 4: Define the async component
In the parent component, use the defineAsyncComponent function to define the DynamicComponent that we want to load dynamically. Add the following code to the parent component:

const DynamicComponent = defineAsyncComponent(() => import('./components/DynamicComponent.vue'))

Step 5: Load the dynamic component
Now that we have defined the dynamic component using the defineAsyncComponent function, we can load the component in the parent component’s template. Add the following code to the parent component’s template:

<template>
  <div>
    <h1>Parent Component</h1>
    <button @click="loadDynamicComponent">Load Dynamic Component</button>
    <div v-if="isLoaded">
      <DynamicComponent />
    </div>
  </div>
</template>

Step 6: Add the loadDynamicComponent method
Finally, add the loadDynamicComponent method to the parent component’s script section to toggle the visibility of the dynamic component:

export default {
  name: 'ParentComponent',
  setup() {
    const isLoaded = ref(false)

    const loadDynamicComponent = () => {
      isLoaded.value = true
    }

    return {
      isLoaded,
      loadDynamicComponent,
    }
  }
}

Step 7: Run the Vue project
Run the Vue project using the following command:

npm run serve

You should now see a button in the parent component that, when clicked, loads the dynamic component DynamicComponent dynamically. This demonstrates how to use the defineAsyncComponent function in the Vue Composition API to load components lazily and improve the performance of your Vue application.

In conclusion, the defineAsyncComponent function in the Vue Composition API is a powerful tool for lazy-loading components and improving the performance of your Vue application. By following the steps outlined in this tutorial, you can easily load components dynamically in Vue 3 using the Composition API.