Componentes asíncronos en Vue 3 con Suspense

Fecha de publicación: julio 27, 2020

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on google
Google+
Share on whatsapp
WhatsApp
Share on email
Email

En Vue 3 y gracias a la API de Composición tenemos la posibilidad de definir componentes asíncronos utilizando el método setup de la siguiente forma:

Puedes ver que el método setup utiliza async y que resolvemos una promesa con await, hasta aquí todo bien, pero… ¿cómo podemos utilizar este componente en Vue 3? Si hacemos lo siguiente directamente nuestro componente no se mostrará:

Componentes asíncronos en Vue 3

Para cargar componentes asíncronos en Vue 3 de forma correcta y que su contenido sólo se muestre una vez todas las promesas involucradas hayan sido resueltas debemos utilizar Suspense, un componente nuevo de Vue 3 que hace la magia.

¿Quieres acceder a más de 100 cursos de PHP y JavaScript?

Vuejs, Laravel, NodeJS, WordPress, Serverless, React Native, Amazon Web Services y mucho más

Quiero hacerme Premium
Cursosdesarrolloweb ©. Todos los derechos reservados.

Login