Componenta <Suspense> în Vue 3 în Vue.js & Nuxt

Orchestrează afișarea unui conținut de rezervă (fallback / spinner) în timp ce componentele copil asincrone își descarcă datele.

Sintaxă
<Suspense><template #default><ComponentaAsincrona /></template><template #fallback><IndicatorIncarcare /></template></Suspense>

Ce este componenta

Componenta <Suspense> coordonează randarea componentelor asincrone (componente care utilizează async setup() sau await direct la nivel de vârf în <script setup>). Oferă două sloturi dedicate:

  • #default: conținutul principal ce va fi afișat imediat ce toate componentele asincrone din arbore au finalizat încărcarea.
  • #fallback: conținutul temporar (loader, schelet grafic) afișat în timpul descărcării datelor.
Exemplu Concret: Încărcarea elegantă a unei componente asincrone
<template>
  <Suspense>
    <template #default>
      <DashboardStatistici />
    </template>
    <template #fallback>
      <div class="loader">Se generează statisticile...</div>
    </template>
  </Suspense>
</template>

Comunitate & Schimb de cunoștințe

Întrebări & Exemple de Cod: Componenta <Suspense> în Vue 3

Ai o nelămurire despre utilizarea comenzii Componenta <Suspense> în Vue 3 sau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!

💬

Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!

Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.

Comunitate Adaugă o întrebare sau distribuie un cod

Moderare & Siguranță:

Pentru a menține calitatea și securitatea informațiilor, fiecare întrebare sau fragment de cod/prompt este analizat (manual sau prin moderare asistată de AI) înainte de publicare.