Seite 9 - Vue.js

Die Composition API von Vue 3 verändert, wie Logik zwischen Komponenten geteilt wird, und genau diese Verschiebung eröffnet neue Muster für Tailwind CSS in Vue 3 Projekten. Reaktive Klassenlisten, wiederverwendbare Composables für Varianten und ein sauberes Zusammenspiel mit Scoped Slots machen aus verstreuten Utility Klassen ein konsistentes, gut wartbares Design System.

Ein Composable, das Daten lädt, aber laufende Requests nicht abbrechen kann, produziert schleichend zwei Arten von Problemen: veraltete Antworten, die nach dem Unmount noch versuchen, einen längst zerstörten Zustand zu aktualisieren, und Race Conditions, bei denen ein schneller zweiter Request von einem langsameren ersten überschrieben wird. AbortController löst beide Probleme, wenn man ihn konsequent in das eigene useFetch-Composable integriert.

Eine schlecht designte Component API in einer geteilten Komponentenbibliothek ist Mehrarbeit für jedes Team-Mitglied, das sie nutzt. Props ohne Standardwerte, Emits ohne Typ-Contracts, fehlende Slots für Kompositionsstellen und undokumentiertes Expose-Interface machen Komponenten schwer nutzbar. Mit klaren Konventionen und TypeScript entstehen Component APIs, die stabil, erweiterbar und rückwärtskompatibel sind.

Copy-Paste zwischen Vue-Komponenten ist ein stilles Wartungsproblem: Wenn dieselbe Fetch-Logik, derselbe Validierungs-Code oder dasselbe Scroll-Verhalten in zehn Komponenten dupliziert ist, entsteht ein System, das bei jeder Bugfixierung zehnmal angefasst werden muss. Vue Composables lösen dieses Problem strukturell – durch Kapselung reaktiver Logik in useX-Funktionen, die sich wie Bausteine zusammensetzen lassen.

Eine Nuxt 2 zu Nuxt 3 Migration in einem großen Projekt komplett neu zu schreiben, ist selten realistisch. Mit Nuxt Bridge als Zwischenschritt, einer klaren Reihenfolge bei Vuex, asyncData und Modul-Ablösung lässt sich die Migration in überschaubaren, testbaren Schritten durchführen, statt das Projekt wochenlang lahmzulegen.

Eine PWA mit Vue und Vite verwandelt eine bestehende Webanwendung in eine installierbare, offline-fähige App, ohne App-Store-Review und ohne separate native Codebasis. Mit vite-plugin-pwa lassen sich Service Worker, Web-App-Manifest und Caching-Strategien weitgehend automatisiert konfigurieren, während Update-Handling und Offline-Verhalten gezielt auf die eigene Anwendung zugeschnitten werden.

Drag-and-Drop wirkt simpel, bis man Ghost-Images debuggt, Touch-Events auf Mobilgeräten nicht funktionieren und der Zustand nach dem Drop nicht konsistent ist. Vue 3 bietet mit der Composition API und spezialisierten Bibliotheken alle Bausteine für ein sauberes Drag-and-Drop ohne visuellen oder logischen Chaos.

Ein Dateiupload ohne Fortschrittsanzeige, ohne Vorschau und ohne verständliche Fehlermeldungen frustriert Nutzer. Vue 3 bietet mit der Composition API, der FileReader-API und Axios-Upload-Progress alle Bausteine für einen professionellen Dateiupload — wenn man weiß, wie sie zusammenspielen.

Seit Vue 3.4 (und weiter verfeinert in Vue 3.5) übernimmt das Compiler-Makro defineModel die gesamte Verdrahtung, die früher aus einer props-Deklaration, einem emits-Eintrag und einem manuellen emit('update:modelValue', wert) bestand. Wer v-model an eigenen Komponenten anbietet, kommt mit einer einzigen Zeile aus, die sich wie ein normaler ref verhält, aber automatisch in beide Richtungen synchronisiert.

shallowMount ersetzt jede Kindkomponente durch einen Stub und rendert nur die getestete Komponente selbst, mount baut den kompletten Komponentenbaum auf. Beide Funktionen aus Vue Test Utils lösen unterschiedliche Testprobleme, und wer sie verwechselt, bekommt entweder Tests, die zu viel gleichzeitig prüfen, oder Tests, die an internen Details von Kindkomponenten zerbrechen.