Appearance
API-Schicht
Komponenten sollen Serverzugriffe nicht direkt ausführen. Produktiver App-Code verwendet die gemeinsamen Fetch- und API-Composables.
$ivmFetch
app/plugins/00.ivm.ts registriert nuxtApp.$ivmFetch.
Eigenschaften:
- verwendet
runtimeConfig.public.devServerals Basis-URL - sendet Requests mit Credentials
- behandelt
401über ein Login-Popup - wiederholt den fehlgeschlagenen Request nach erfolgreichem Login
- triggert
app:loginund aktualisiert Nuxt-Async-Data
Alle appinternen API-Helfer bauen darauf auf.
useIVMFetch(...)
app/composables/api/useIVMFetch.ts ist der useFetch-Wrapper für IVM-Requests.
Das Composable setzt nur $fetch: useNuxtApp().$ivmFetch und behält dadurch das normale Nuxt-Async-Data-Verhalten bei.
Typische Nutzung:
ts
await useIVMFetch<ApiResponse<Data>>('/some/path', {
immediate: true,
watch: [someRef],
})Einsatzbereiche im Code sind unter anderem /create, ProtocolSelection.vue und die Historie.
useIVMApi()
app/composables/api/useIVMApi.ts ist der imperative API-Helfer für JSON, Blob, Raw, HEAD und DELETE.
Der Helper normalisiert URLs:
blob:bleibt ein Blob-Zugriff überfetch- absolute URLs auf denselben
devServerwerden zu IVM-Pfaden normalisiert - fremde absolute HTTP(S)-URLs laufen über
$fetch - relative Pfade laufen über
$ivmFetch
Das ist wichtig für PDF-Vorschauen, fertige PDF-Dateien und Bild-/Dateioperationen, weil dort lokale Blob-URLs, Backend-Pfade und absolute URLs zusammen vorkommen.
Fachliche API-Composables
Fachliche Mutationen liegen in kleineren Composables.
app/composables/api/useAcceptanceApi.ts:
createAcceptance(contractId, type)->POST /acceptance/archiveAcceptance(acceptanceId)->POST /acceptance/{id}/archivemarkPendingUpload(acceptanceId)->POST /acceptance/{id}/pending-uploadunlockAcceptance(acceptanceId)->POST /acceptance/{id}/unlock
app/composables/api/useSetupApi.ts:
- globale Setup-Editoren
- Raumtypen, Raumklassen, Komponenten und Materialien
- Verantwortlichkeiten und Scope-Einstellungen
- Dienstleister, globale Vorlagen, Mieterbestätigungen
- allgemeine Einstellungen, PDF-Einstellungen und Sektionskonfiguration
app/composables/api/useBillingProvidersApi.ts:
getFlatAssignments()->GET /billing-providers/flat-assignments
Binärdaten
Für Uploads mit Fortschritt nutzt die App nicht $fetch, sondern XHR-Helfer.
Beispiele:
app/utils/upload.tsfür Bild-Uploadsapp/composables/protocol/finalizeUpload.tsfür Finalisierungsdokumente
Dadurch können Upload-Fortschritt, Retry-Zähler und Abbruchfehler präzise im UI angezeigt werden.
Regel
Neue produktive API-Zugriffe sollten in einem passenden Store oder Composable landen.
Direkte API-Aufrufe aus präsentationalen Komponenten sind zu vermeiden. Wiederverwendbare fachliche Endpunkte gehören in app/composables/api/**, workflownahe Orchestrierung in app/composables/protocol/** oder einen Store.