How to Use Async Components for Performance in Vue

In Vue, you can use defineAsyncComponent to load components only when they are needed, which improves performance by reducing initial load time. This lazy loading delays component fetching until it is actually rendered, saving bandwidth and speeding up your app.

Syntax

Use defineAsyncComponent from Vue to create an async component. Pass a function that returns a dynamic import() of the component file. This tells Vue to load the component only when it is needed.

• defineAsyncComponent(() => import('./MyComponent.vue')): creates an async component.
• import(): dynamic import that returns a Promise.

javascript

import { defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => import('./MyComponent.vue'));

export default {
  components: {
    AsyncComp
  }
};

Example

This example shows a Vue app that loads a heavy component only when a button is clicked. The async component is not loaded initially, improving startup speed.

vue

<template>
  <div>
    <button @click="show = true">Load Component</button>
    <AsyncComp v-if="show" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { defineAsyncComponent } from 'vue';

const show = ref(false);

const AsyncComp = defineAsyncComponent(() => import('./HeavyComponent.vue'));
</script>

Output

<button>Load Component</button>

<!-- When button clicked, HeavyComponent content appears -->

Common Pitfalls

Common mistakes include:

• Not using defineAsyncComponent and importing components normally, which defeats lazy loading.
• Forgetting to handle loading or error states, which can cause blank UI or errors during slow network.
• Using async components for very small components, which may add unnecessary complexity.

Always consider adding fallback UI for loading and error states.

javascript

import { defineAsyncComponent } from 'vue';

// Wrong: normal import defeats async loading
import HeavyComponent from './HeavyComponent.vue';

// Right: async component with loading and error handling
import LoadingSpinner from './LoadingSpinner.vue';
import ErrorMessage from './ErrorMessage.vue';

const AsyncComp = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorMessage,
  delay: 200,
  timeout: 3000
});

Quick Reference

Tips for using async components in Vue:

• Use defineAsyncComponent with a dynamic import().
• Add loading and error components for better UX.
• Use async components for large or rarely used parts of your app.
• Test on slow networks to ensure smooth loading.

Key Takeaways

Use defineAsyncComponent with dynamic imports to lazy load Vue components.

Async components improve performance by reducing initial bundle size and load time.

Add loading and error states to handle delays and failures gracefully.

Avoid async loading for small or frequently used components to keep code simple.

Test async components on slow connections to ensure good user experience.