Async Components with defineAsyncComponent
defineAsyncComponent(), loadingComponent, errorComponent, delay and timeout options.
Why Async Components
defineAsyncComponent lets you load a component lazily — its code is fetched only when the component is first rendered.
This enables route-level and component-level code splitting, shrinking your initial bundle and speeding up first paint.
The Loader Function Form
The simplest usage passes a loader function that returns a dynamic import(). Vite/webpack code-splits that import into its own chunk automatically.
<script setup>
import { defineAsyncComponent } from 'vue'
const SettingsModal = defineAsyncComponent(() =>
import('./SettingsModal.vue')
)
</script>
<template>
<SettingsModal v-if="showSettings" />
</template>All lessons in this course
- Vue Suspense Component
- Async Components with defineAsyncComponent
- Streaming SSR with renderToWebStream
- Deferred Hydration Strategies