javascriptinterview.dev
Back
VueMediumNew

How do you create asynchronous components in Vue 3?

defineAsyncComponent

Ideal Answer

defineAsyncComponent lets you lazily load a component only when it's actually rendered, useful for splitting large or rarely-used components out of the main bundle.

JavaScript 
import { defineAsyncComponent } from 'vue'

const AsyncModal = defineAsyncComponent(() => import('./Modal.vue'))

You can also configure loading/error states and delays:

JavaScript 
const AsyncModal = defineAsyncComponent({
  loader: () => import('./Modal.vue'),
  loadingComponent: LoadingSpinner,
  errorComponent: ErrorMessage,
  delay: 200,
  timeout: 3000
})