O que é o componente Suspense no Vue?

Question

Accepted Answer

`` é um componente integrado que coordena **async dependencies** em sua árvore de componentes — ele mostra um fallback (loading UI) até que todas as operações async aninhadas sejam resolvidas, depois exibe o conteúdo real. Remove o boilerplate manual `isLoading`. ## Os dois slots ```vue ``` ## Funciona com async setup() / top-level await ```vue ``` Normalmente um componente não pode `await` em setup sem gerenciar estado de carregamento. `` permite que um filho use **top-level `await`** (ou async `setup`), e o Suspense pai gerencia o estado de carregamento para ele — o código filho fica limpo, apenas `await` seus dados. ## Aguarda TODAS as async dependencies aninhadas ```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). ``` ## Tratamento de erros ```vue ``` Combine Suspense com um boundary de erro (`onErrorCaptured`) para lidar com setup async falhados, pois o Suspense em si apenas gerencia a transição de carregamento/carregado. ## Nota de status ```text has been an EXPERIMENTAL feature — its API may change. It's also what Nuxt uses internally to coordinate async page data. ``` ## Por que isso importa `` coordena declarativamente estados de carregamento async — permitindo que componentes `await` seus dados diretamente enquanto um único ancestral mostra um fallback até tudo estar pronto. Elimina flags `isLoading` espalhados e múltiplos spinners, e sustenta busca de dados em frameworks como Nuxt. Saber que existe (e que ainda é experimental, melhor emparelhado com um boundary de erro) é útil para async UI limpo, especialmente em aplicações SSR/data-heavy.