Part 2: Async components

Async Components

Introductions

Then, in Vue 2

export default {
  name: 'App',
  components: {
    myAsyncComponent: () => import('./path/to/my-component.vue)
  }
}

Now, in Vue 3

import { defineAsyncComponent } from 'vue'

export default {
  name: 'App',
  components: {
    myAsyncComponent: defineAsyncComponent(() => import('./path/to/my-component.vue))
  }
}

::: warning VueRouter and dynamic components

VueRouter doesn't accept components wrapped in defineAsyncComponent, see the router docs

:::

Migrating our App

In our app, we use one async component in ./src/components/TodoApp.vue. The fix is simple:

const TodoInput = () => import('./TodoInput.vue')

import { defineAsyncComponent }from 'vue'
const TodoInput = defineAsyncComponent(() => import('./TodoInput.vue'))