Thursday 18 January 2024

What are async components in Vuejs explain with example?081

What are async components in Vuejs explain with example?

Async components in Vue.js are a mechanism to load components asynchronously, improving initial load performance and code splitting for large applications.

Key Features:

  • Delayed Loading: Components are loaded only when needed, reducing initial bundle size and startup time.

  • Code Splitting: Break down the application into smaller chunks, optimizing load times and reducing memory usage.

  • Improved UX: Users perceive faster initial load and smoother interactions.


  1. defineAsyncComponent: Use this function to define an async component:


const asyncComponent = defineAsyncComponent(() =>

  1. component directive: Register the async component like a regular component:

Code snippet

  <component :is="myComponent"></component>

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    myComponent: defineAsyncComponent(() =>

How It Works:

  1. When Vue encounters the async component, it begins loading the component's definition asynchronously.

  2. During loading, Vue displays a placeholder or a loading indicator.

  3. Once the component is loaded, Vue renders it seamlessly.


  • Faster Initial Load: Smaller initial bundle size leads to quicker page load.

  • Improved Performance: Chunks are loaded on demand, reducing memory usage and execution time.

  • Better User Experience: Faster initial rendering and smoother interactions.

  • Code Organization: Split code into smaller, more manageable modules.

Common Use Cases:

  • Lazy loading features: Load components only when needed, such as in tabs or modals.

  • Large applications: Break down into smaller chunks for better performance and maintainability.

  • Third-party component integration: Load external components asynchronously.

Additional Notes:

  • Async components can be used with <keep-alive> for caching.

  • Error boundaries can be used to handle loading errors.

  • Consider using dynamic imports for more fine-grained control over code splitting.

No comments:

Post a Comment

Note: only a member of this blog may post a comment.