Puede leer sobre "Componentes asíncronos" en la documentación oficial de Vue 3 .

Básicamente, puede registrar un componente como asíncrono y se cargará automáticamente cuando intente renderizarse por primera vez.

Simple defineAsyncComponent

 <template> <div> <Modal v-if="open" /> </div> </template> <script> export default { components: { MySyncComponent, Modal: defineAsyncComponent(() => import('./Modal.vue')) } } </script>

Usando <script setup> :

 <script setup> const Modal = defineAsyncComponent(() => import('./Modal.vue')) </script>

Especificación de opciones personalizadas de carga diferida:

 const Modal = defineAsyncComponent({ loader: () => import('./Modal.vue'), loadingComponent: ProgressSpinner, delay: 150, // waits 150ms before showing the loading spinner errorComponent: ErrorComponent, timeout: 2000 // if not loaded before 2s, will show error })

Usando el componente contenedor <Suspense> :

Con el componente Suspense , todos los componentes secundarios se tratarán como asíncronos de forma predeterminada. Estarán en su propio trozo de código.

 <Suspense> <Modal v-if="open"> <!-- Loading as asynchronous --> <template #fallback> Loading... </template> </Suspense>