Async Components & Suspense

W NOVA LAB ciężkie moduły cargo nie są ładowane od razu - system ładuje je na żądanie, wyświetlając status na ekranie. Vue oferuje async components - ładowanie komponentów lazy (na żądanie) i Suspense - kontrolę nad stanem ładowania.

defineAsyncComponent

Zamiast importować komponent bezpośrednio, możesz go załadować asynchronicznie:

1<script setup>
2import { defineAsyncComponent } from 'vue'
3
4// Prosty lazy import
5const HeavyModule = defineAsyncComponent(
6  () => import('./HeavyModule.vue')
7)
8</script>
9
10<template>
11  <HeavyModule />
12</template>

Komponent jest pobierany dopiero gdy jest potrzebny (renderowany w template).

Zaawansowana konfiguracja

1<script setup>
2import { defineAsyncComponent } from 'vue'
3import LoadingSpinner from './LoadingSpinner.vue'
4import ErrorDisplay from './ErrorDisplay.vue'
5
6const HeavyModule = defineAsyncComponent({
7  // Funkcja ładująca
8  loader: () => import('./HeavyModule.vue'),
9
10  // Komponent wyświetlany podczas ładowania
11  loadingComponent: LoadingSpinner,
12
13  // Opóźnienie przed wyświetleniem loading (ms)
14  delay: 200,
15
16  // Komponent wyświetlany gdy ładowanie się nie powiedzie
17  errorComponent: ErrorDisplay,
18
19  // Timeout - po tym czasie wyświetli error (ms)
20  timeout: 10000
21})
22</script>

Suspense

<Suspense>

to wbudowany komponent Vue do zarządzania stanem ładowania asynchronicznych komponentów:

1<template>
2  <Suspense>
3    <!-- Treść główna (ładowany komponent) -->
4    <template #default>
5      <HeavyModule />
6    </template>
7
8    <!-- Loading state -->
9    <template #fallback>
10      <div class="loading">
11        <p>Loading module...</p>
12        <div class="spinner"></div>
13      </div>
14    </template>
15  </Suspense>
16</template>

Suspense events

Suspense emituje eventy informujące o stanie ładowania:

1<template>
2  <Suspense
3    @pending="onPending"
4    @resolve="onResolve"
5    @fallback="onFallback"
6  >
7    <template #default>
8      <AsyncModule />
9    </template>
10    <template #fallback>
11      <LoadingSpinner />
12    </template>
13  </Suspense>
14</template>
15
16<script setup>
17const onPending = () => console.log('Loading started...')
18const onResolve = () => console.log('Loading complete!')
19const onFallback = () => console.log('Fallback displayed')
20</script>

Async setup w komponentach

Komponent z

async setup

lub top-level

await

automatycznie staje się async dependency dla Suspense:

1<!-- AsyncModule.vue -->
2<script setup>
3const data = await fetch('/api/module-data')
4  .then(r => r.json())
5</script>
6
7<template>
8  <div>{{ data.name }}</div>
9</template>