¿Qué es el componente Suspense en Vue?

Question

Accepted Answer

`` es un componente incorporado que coordina **dependencias asincrónicas** en su árbol de componentes — muestra un fallback (UI de carga) hasta que se resuelvan todas las operaciones asincrónicas anidadas, y luego muestra el contenido real. Elimina el boilerplate `isLoading` manual. ## Los dos slots ```vue ``` ## Funciona con async setup() / top-level await ```vue ``` Normalmente un componente no puede `await` en setup sin gestionar el estado de carga. `` permite que un componente hijo use **top-level `await`** (o async `setup`), y el Suspense padre maneja el estado de carga para él — el código del hijo permanece limpio, simplemente `await`ando sus datos. ## Espera TODAS las dependencias asincrónicas anidadas ```text waits for every async setup in its subtree to resolve, then swaps the fallback for the real content in one go (avoids a cascade of separate spinners). ``` ## Manejo de errores ```vue ``` Emparejar Suspense con un error boundary (`onErrorCaptured`) para manejar setups asincrónicas fallidas, ya que Suspense en sí mismo solo gestiona la transición carga/cargado. ## Nota de estado ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Por qué es importante `` coordina declarativamente estados de carga asincrónica — permitiendo que los componentes `await` sus datos directamente mientras un único ancestro muestra un fallback hasta que todo esté listo. Elimina banderas `isLoading` dispersas y múltiples spinners, e impulsa la obtención de datos en frameworks como Nuxt. Saber que existe (y que aún es experimental, mejor emparejado con un error boundary) es útil para UI asincrónica limpia, especialmente en aplicaciones SSR/con muchos datos.