Vue 3 Composables: Wiederverwendbare Logik richtig strukturieren

Was sind Composables?

Composables sind Funktionen, die Vue 3 Reactivity nutzen, um wiederverwendbare Logik zu kapseln. Sie ersetzen die Mixins und Options-API-Patterns aus Vue 2 und bieten bessere Typsicherheit, klarere Abhängigkeiten und einfacheres Testing.

Anatomie eines guten Composables

Ein gut strukturiertes Composable folgt einem klaren Pattern: Es beginnt mit use, nimmt optionale Parameter entgegen, nutzt reaktive Refs intern und gibt ein Objekt mit reaktiven Werten und Methoden zurück. Lifecycle-Hooks wie onMounted und onUnmounted werden intern verwaltet.

Grundregeln:

• Namenskonvention: Immer mit use beginnen (useAuth, useFetch, useCart)
• Rückgabe: Immer ein Objekt mit benannten Properties (nicht ein Array)
• Cleanup: Immer in onUnmounted aufräumen (Event-Listener, Timer, Subscriptions)
• TypeScript: Rückgabetyp explizit definieren

Pattern 1: Data Fetching

Das häufigste Pattern: Ein Composable, das Daten von einer API lädt. Es verwaltet Loading-State, Error-Handling und die Daten selbst. Mit generischen TypeScript-Typen wird es für jeden Endpoint wiederverwendbar.

Pattern 2: UI-State

Modale Dialoge, Toasts, Sidebar-State – UI-Logik, die in vielen Komponenten gebraucht wird, gehört in Composables. Nutze provide/inject für App-weiten State oder einfache Refs für komponentenübergreifenden State.

Pattern 3: Browser APIs

localStorage, IntersectionObserver, ResizeObserver, Geolocation – Browser APIs in Composables zu wrappen macht sie reaktiv und SSR-sicher. Prüfe immer import.meta.client (oder process.client in Nuxt), bevor du auf Browser APIs zugreifst.

Testing

Composables lassen sich hervorragend isoliert testen. Nutze Vitest mit der Vue Test Utils mountSuspended-Funktion. Da Composables reine Funktionen sind, brauchst du kein DOM-Setup – du rufst die Funktion auf und prüfst die reaktiven Rückgabewerte.

Anti-Patterns vermeiden

• Nicht zu viel in ein Composable packen – Single Responsibility Principle beachten
• Keine Side Effects im Top-Level – nutze onMounted
• Kein globaler State ohne Absicht – Composables erstellen bei jedem Aufruf neue Instanzen
• Nicht Options API und Composition API mischen