Vue Tip: Speed Up Initial Load Using Async Components

The regular, synchronous way of loading components is:

import MyComponent from './MyComponent.vue';

In large applications, it makes sense to split the code into smaller chunks and only load it from the server when it’s needed.

Vue 3 therefore provides the defineAsyncComponentfunction:

import { defineAsyncComponent } from 'vue';

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */);
  });
});

Now we can to use AsyncComp like a normal component in Vue.

Here are the docs for Async Components in Vue 3.

The syntax for Vue 2 is not that different:

const AsyncComponent = () =>
import('./components/LazyLoadingFTW.vue');

If you liked this tip, follow me on Twitter to get notified about new tips, blog posts and more content from me.

Alternatively (or additionally), you can also subscribe to my newsletter.