Seite 2 - Vue.js

Wer für sein Nuxt Frontend ein separates Node oder PHP Backend aufsetzt, verdoppelt oft unnötig die Infrastruktur. Nuxt Server Routes bauen auf dem Nitro Server auf und liefern Routing, Validierung, Fehlerbehandlung und Caching in derselben Codebasis, deployt als ein einziges Deployment Artefakt.

Wer Logging, CORS Header oder Request IDs in jeder einzelnen Nuxt Server Route separat implementiert, produziert Code Duplikation an zehn Stellen gleichzeitig. Nuxt Server Middleware in server/middleware läuft vor jedem Handler und löst genau diese Querschnittsaufgaben zentral, ohne dass eine Route davon weiß.

Vue 3 brachte drei Features mit sich, die selten zusammen erklärt werden, aber sich gegenseitig ergänzen: Teleport für korrektes DOM-Placement, Suspense für deklarative Ladezustände und Async Components für gezieltes Code-Splitting. Wer alle drei versteht und sinnvoll kombiniert, baut Vue-Anwendungen mit besserer UX, kleineren Bundles und saubererer Komponentenarchitektur.

Datenvisualisierungen in Vue 3 werden oft als Blackbox eingebunden – die Chart-Library übernimmt den Canvas-DOM und Vue verliert den Überblick. Mit dem richtigen Composable-Pattern bleiben Charts reaktiv, werden korrekt zerstört, unterstützen Screenreader durch ARIA-Alternativtexte und laden per defineAsyncComponent erst dann, wenn sie tatsächlich sichtbar sind.

Props fließen nach unten, Emits fließen nach oben – der One-Way Data Flow in Vue.js ist kein Design-Dogma, sondern die Grundlage für vorhersehbares, debugbares Komponentenverhalten. Wer Props mutiert, baut Bugs, die erst unter Last oder bei komplexen Zustandsänderungen sichtbar werden.

Die meisten Vue-Tutorials arbeiten fast ausschließlich mit Arrays und einfachen Objects, dabei bringt JavaScript mit Map und Set zwei Collection-Typen mit, die für bestimmte Aufgaben deutlich besser passen. Vues Reactivity-System unterstützt beide vollständig, sodass reactive(new Map()) und reactive(new Set()) genauso zuverlässig auf Änderungen reagieren wie ein reaktives Array. Wer weiß, wann eine Set-basierte Auswahl in einer Multi-Select-UI oder eine Map-basierte Lookup-Struktur die bessere Wahl ist, und welche Fallstricke bei der Destrukturierung lauern, schreibt spürbar robusteren und schnelleren Code.

Module Federation lädt Vue-Komponenten erst im Browser aus getrennt deployten Anwendungen nach, statt sie zur Build-Zeit einzubinden. Das ermöglicht unabhängige Deployments über Teamgrenzen hinweg, verlangt aber eine bewusste Strategie für geteilte Abhängigkeiten, Versionskonflikte und Fallbacks, wenn ein Remote nicht erreichbar ist.

Pinia ist nicht einfach nur Vuex 5 mit anderem Namen — es ist ein grundlegend anderer Ansatz, der die Composition API konsequent nutzt. Wer Pinia nur als Datenspeicher nutzt, verschenkt das Potenzial von Store-Komposition, typsicheren Actions und reaktiven Getters. Dieser Artikel zeigt, wie State Management mit Pinia in Vue 3 von Grund auf richtig aufgebaut wird.

Reactivity Transform versprach reaktive Werte ohne .value, direkt destrukturierbar wie normale Variablen. Das Compiler-Experiment wurde 2023 offiziell verworfen. Wer heute alten Code oder Blogposts dazu liest, sollte verstehen, wie es funktionierte, warum es scheiterte und was für die Praxis übrig bleibt.

Ein Nuxt Hydration Mismatch zeigt sich meist als kryptische Konsolen-Warnung, die selten direkt auf die Ursache verweist. Mit einer festen Debugging-Reihenfolge, von der Warnungs-Interpretation über typische Ursachen wie Datum und Zufallszahlen bis zu ClientOnly und v-if als Werkzeug, lässt sich jeder Hydration Mismatch systematisch statt zufällig gefunden werden.