VueJS Async Components

Heading h1

VueJS Async components allow you to load components on demand. This results in faster initial loading and improved performance. VueJS Async components are ideal if you have a large application and want to split the resources into small chunks, to be loaded only when needed, thus saving bandwidth and speeding up loading time.

Syntax

<template>
  <div>
    <!-- When the button is clicked, the 'async-component' component will be loaded -->
    <async-component @load="doSomething()"></async-component>
    <button @click="loadComponent">Load Async Component</button>
  </div>
</template>

<script>
// import the 'async-component' using webpack's built-in dynamic import functionality
const AsyncComponent = () => import('./AsyncComponent.vue')

export default {
  name: 'app',
  components: {
    // async-component will be registered as a normal component
    'async-component': AsyncComponent
  },
  methods: {
    async loadComponent() {
      // dynamically load the async component
      const component = await AsyncComponent()
      // do something with the loaded component
      this.$emit("load")
    }
  }
}
</script>

Example

Here is an example of a VueJS component that loads async and handles the loading state:

<template>
  <div>
    <div v-if="isLoading">Loading ...</div>
    <div v-else>
      <async-component @load="doSomething()"></async-component>
      <button @click="load">Load Async Component</button>
    </div>
  </div>
</template>

<script>
const AsyncComponent = () => import('./AsyncComponent.vue')

export default {
  name: 'App',
  components: {
    'async-component': AsyncComponent
  },
  data() {
    return {
      isLoading: false,
      componentLoaded: false
    }
  },
  methods: {
    async load() {
      // Show loading message and set isLoading to true
      this.isLoading = true
      // Lazy load the component using dynamic import
      const component = await AsyncComponent()
      // Component has finished loading - hide loading message and componentLoaded to true
      this.isLoading = false
      this.componentLoaded = true
    },
    doSomething() {
      // Processing after the 'async-component' was loaded
    }
  }
}
</script>

Output

The output of the above example will be a button with the text "Load Async Component". Clicking the button will display the "Loading..." message while the component is being loaded. Once the component finishes loading, it will appear on the page.

Explanation

VueJS Async Components use Webpack's dynamic import functionality to load components on demand. This allows you to split your application into small and manageable chunks that are loaded only when needed. The import() method returns a Promise that resolves to a module object. Once the module has loaded, it can be used like any other component in VueJS.

Use

VueJS Async Components are extremely useful for large applications that have many components. They are also useful if you have components that are not used very often. By loading components on demand, you can reduce the initial loading time of your application and improve performance.

Important Points

• VueJS async components use Webpack's dynamic import functionality to load components on demand.
• The import() method returns a Promise that resolves to a module object.
• Async components can be registered as a normal component.
• Async components are ideal for large applications and components that are not used very often.

Summary

VueJS Async Components are an excellent way to improve the performance and initial load time of your VueJS application. By loading components on demand, you can reduce the amount of time it takes for your application to load and render. Async components are easy to implement and can be registered as a normal component. VueJS Async Components are ideal for large applications and components that are not used very often.