Seite 7 - Vue.js

Vue 2 hat sein End-of-Life erreicht. Die Migration auf Vue 3 ist kein einfaches Dependency-Update — sie betrifft das reaktive System, den Lifecycle, die Build-Pipeline und viele Bibliotheken gleichzeitig. Wer sie realistisch plant, statt sie zu unterschätzen, schließt sie auch ab.

Ein Custom Ref gibt vollständige Kontrolle über Dependency Tracking und Update-Auslösung. Wer die customRef API versteht, kann Debounce, Validierung, Storage-Synchronisation und andere Muster als sauberes, wiederverwendbares reaktives Primitiv kapseln, statt sie in jeder Komponente neu zusammenzuklicken.

Ein Button mit 30 Tailwind-Klassen im Template ist kein Tailwind-Problem – es ist ein Architekturproblem. Vue und Tailwind lassen sich so kombinieren, dass Klassenlogik in computed-Properties lebt, Varianten durch cva verwaltet werden und Templates lesbar bleiben, ohne auf die Expressivität von Tailwind zu verzichten.

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.

Responsive Vue Komponenten scheitern oft an reinen CSS-Media-Queries, weil sich Komponenten in unterschiedlichen Layout-Kontexten unterschiedlich verhalten müssen, unabhängig von der Viewport-Breite. Container Queries, eigene Breakpoint-Composables und adaptive Slot-Strukturen lösen das strukturell statt mit immer mehr CSS-Ausnahmen.