Seite 5 - Vue.js

Nuxt 3 bietet Server Side Rendering, Static Site Generation, Incremental Static Regeneration und Hybrid-Rendering — alles in einem Framework. Wer die Unterschiede nicht kennt, verschenkt Performance und SEO-Potenzial. Dieser Artikel erklärt alle Rendering-Modi mit konkreten Route-Rules-Konfigurationen und typischen Fallstricken.

Ein Big-Bang-Rewrite scheitert häufiger als er gelingt. Die bessere Strategie: Vue schrittweise in bestehende PHP-Monolithen, Twig-Templates und jQuery-Anwendungen einführen – Insel für Insel, ohne den laufenden Betrieb zu unterbrechen.

Compiler-Makros wie defineProps und defineModel wirken wie normale Funktionsaufrufe, existieren zur Laufzeit aber gar nicht, sie werden vom Vue-Compiler beim Bauen des Codes wegtransformiert. Das dedizierte Vue Macros Plugin geht noch weiter und ergänzt eigene Makros für Reaktivität, Props-Weiterreichung und bedingte Kompilierung, mit klaren Kompromissen bei Tooling und Vorhersehbarkeit.

Server Side Rendering löst das Problem eines leeren initialen HTML, verschiebt den Engpass aber auf den Server Render selbst. SSR Performance Tuning in Nuxt bedeutet, Time to First Byte, Datenlade Wasserfälle, Payload Größe und Hydration Kosten gezielt zu senken, statt SSR nur ein und auszuschalten.

Vue provide/inject ist der unterschätzte Mittelweg zwischen Prop Drilling und globalen Pinia-Stores. Richtig eingesetzt ermöglicht es scoped Dependency Injection für Komponentenfamilien – typsicher, reaktiv und ohne globalen Zustand.

Realtime-Features in Vue.js sind mehr als ein geöffneter WebSocket. Wer WebSocket, Server-Sent Events und Polling nicht bewusst wählt, baut entweder zu viel Infrastruktur auf oder kassiert unnötige Netzwerklast. Dieser Artikel zeigt alle drei Strategien mit sauberen Composables, Lifecycle-Handling und konkreten Einsatzempfehlungen.

Nuxt fängt unbehandelte Laufzeitfehler automatisch ab und rendert an ihrer Stelle die Datei error.vue im Projekt-Root. Mit clearError() lässt sich der Fehlerzustand gezielt wieder verlassen, während die Darstellung je nach Statuscode individuell an 404- oder 500-Situationen angepasst werden kann.

Playwright testet Vue-Anwendungen als Ganzes im echten Browser, mit Auto-Waiting statt fester Timeouts, mit Netzwerk-Interception statt echtem Backend und mit paralleler Ausführung über mehrere Browser-Engines hinweg. Das macht End-to-End-Tests planbar statt zur Quelle ständiger CI-Flakiness.

Ein Zod-Schema beschreibt gleichzeitig, welche Werte ein Formularfeld annehmen darf und welchen TypeScript-Typ das Ergebnis nach erfolgreicher Validierung hat. Kombiniert mit VeeValidate über einen Zod-Resolver entsteht eine einzige Quelle der Wahrheit für Formulare, die sonst leicht zwischen Validierungslogik und Typdefinitionen auseinanderdriftet.

Formulare, die sich aus Konfiguration generieren, statt hart codiert zu sein, sparen Entwicklungszeit und ermöglichen Back-End-Teams, Formularstrukturen ohne Frontend-Deployment zu ändern. Dieser Artikel zeigt, wie man einen robusten Form Builder in Vue 3 baut – von der Felddefinition über dynamische Validierung bis zu bedingten Feldern.