Photo by WrongTog on Unsplash

Lazy Load Components in Vue with defineAsyncComponent

Using Vue 3’s defineAsyncComponent feature lets us lazy load components — meaning they’re only loaded when they’re needed.

Using Vue 3’s defineAsyncComponent feature lets us lazy load components. This means that they're only loaded from the server when they're needed.

This is a great way to improve initial page loads as our app will be loaded in smaller chunks rather than having to load every single component when the page loads.

Source: Imperva.com

In this tutorial, we’ll learn all about defineAsyncComponent and look at an example that defers the loading of a popup until it's required by our app.

Okay — let’s get into it.

What is defineAsyncComponent

// SOURCE: https://v3.vuejs.org/guide/component-dynamic-async.html
const AsyncComp = defineAsyncComponent(
  () =>
    new Promise((resolve, reject) => {…