Seite 6 - Vue.js

Nuxt Middleware ist der zentrale Mechanismus, um Routen zu schützen, Authentifizierung zu erzwingen und rollenbasierte Zugriffskontrolle sauber in der App-Schicht zu implementieren – ohne Sicherheitslogik in jede einzelne Seite zu kopieren.

Vue.js schützt von Haus aus vor den meisten XSS-Angriffen – bis Entwickler v-html, innerHTML oder unsanitisierte API-Daten einsetzen. Ein Vue Security Review deckt auf, wo diese Schutzmechanismen umgangen werden und wie man Third-Party-Abhängigkeiten und fehlende CSP als zusätzliche Angriffsvektoren behandelt.

State Explosion ist das häufigste Wartbarkeitsproblem in wachsenden Vue-Projekten: Komponenten akkumulieren reaktive Variablen, Watcher und lokalen State, bis sie nicht mehr verstehbar sind. Der Ausweg liegt darin, State zu minimieren, Derived State aus Props abzuleiten und Reaktivität nur dort einzusetzen, wo sie wirklich gebraucht wird.

Komponentendokumentation, die keiner liest, ist verschwendete Zeit. Storybook macht Vue-Komponenten interaktiv erlebbar – für Entwickler, Designer und QA-Teams gleichzeitig, direkt aus dem Quellcode generiert.

Ein direktes fetch-Call, das JSON ins Template wirft, ist kein API-Layer – es ist ein Wartungsproblem. DTOs, strukturiertes Error-Mapping und Retry-Logik machen die Vue REST API-Integration zu einer stabilen Schicht, auf die man sich verlassen kann.

Die Vue DevTools sind mehr als ein Komponentenbaum-Viewer. Wer sie nur zum Nachschauen von Props benutzt, lässt die Mehrheit des Potenzials ungenutzt. Timeline-Tracing, Pinia-Debugging, Performance-Profiling und eigene Plugin-Integration verwandeln die Vue DevTools in das effektivste Diagnose-Werkzeug für Vue-3-Anwendungen.

Eine Vue-Nuxt-Checkliste für den Launch ist mehr als eine To-do-Liste – sie ist die strukturierte Qualitätssicherung, die verhindert, dass eine App mit langsamen Core Web Vitals, fehlender Barrierefreiheit oder zerbrechlicher API-Integration in Produktion geht.

Ein einzelnes Modal mit Teleport zu bauen ist in Vue eine gut dokumentierte Aufgabe. Schwieriger wird es, sobald ein zweites Modal über dem ersten geöffnet wird, etwa ein Bestätigungsdialog, der vor dem Verlassen eines Formulars warnt. Dann müssen z-index-Werte, Fokus-Management, die Escape-Taste und der Scroll-Lock des body-Elements so koordiniert werden, dass sich die Modals nicht gegenseitig stören.

Lose Markdown Dateien ohne Schema führen dazu, dass ein Tippfehler im Frontmatter erst live auf der Website auffällt, oft an unerwarteter Stelle. Content Collections in Nuxt Content v3 bringen Zod basierte Schema Validierung und automatisch generierte TypeScript Typen mit, sodass genau diese Fehler bereits beim Build sichtbar werden, lange bevor ein Nutzer die Seite sieht.

Eine normale Destrukturierung zerstört die Reaktivität eines reactive()-Objekts, weil einzelne Felder zu einfachen Kopien werden. toRef() und toRefs() lösen genau dieses Problem, indem sie jede Property in einen eigenständigen Ref verwandeln, der weiterhin an die Originalquelle gekoppelt bleibt.