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'))
Thats' it!
Further Reading.
Async Components also have a more advanced format where one cane provide a placeholder components for loading and error states and such. The API is pretty much the same though.
For further details, read the: