How to dynamically import Vue 3 component?

In Vue 3, dynamically importing components is a highly practical feature, especially when handling large applications, as it enables on-demand loading and optimizes the application's load time and performance.

1. Using the defineAsyncComponent method

Vue 3 provides the defineAsyncComponent method, which simplifies dynamic imports. Here are the steps to use it:

First, import defineAsyncComponent from the vue library:

javascript
import { defineAsyncComponent } from 'vue';

Next, define an asynchronous component using this method. The key is to employ the import() syntax for dynamic imports:

javascript
const AsyncComponent = defineAsyncComponent(() =>
  import('./components/MyAsyncComponent.vue')
);

Then, use this asynchronous component within a Vue component just like a regular component:

vue
<template>
  <div>
    <AsyncComponent />
  </div>
</template>

<script>
export default {
  components: {
    AsyncComponent
  }
};
</script>

2. Using local registration and import() syntax

If you prefer not to globally register the asynchronous component, you can directly use import() within the local component registration:

vue
<template>
  <div>
    <MyAsyncComponent v-if="isComponentLoaded" />
  </div>
</template>

<script>
export default {
  components: {
    MyAsyncComponent: () => import('./components/MyAsyncComponent.vue')
  },
  data() {
    return {
      isComponentLoaded: true
    };
  }
};
</script>

In this example, MyAsyncComponent is loaded and rendered only when needed, reducing the initial load time.

Example application scenario

Consider an e-commerce platform featuring multiple complex components, such as product displays, comment modules, and payment interfaces. These components are only loaded when users access the corresponding pages. By using dynamic imports, you can load these components on-demand, thereby improving the application's responsiveness and performance.

Summary

Dynamically importing components is an effective tool in Vue 3 for managing large-scale applications and optimizing performance. By using defineAsyncComponent or local component registration with import() syntax, you can flexibly control component loading timing, making the application more efficient.