Seite 7 - Vue.js

Nuxt 3 ist mehr als ein Vue-3-Framework mit File-Based-Routing. Die Nitro Engine, Server Routes, Auto-Import und die klare Trennung von Server- und Client-Schichten sind ein durchdachtes Architekturmodell — das nur dann seine Stärken zeigt, wenn man versteht, warum es so gebaut ist.

Ohne einen sauberen Preview Modus bleibt Redakteuren nur die Wahl, einen Entwurf entweder blind zu veröffentlichen oder lokal auf dem eigenen Rechner zu prüfen. Ein durchdachter Preview Modus für Nuxt Content macht Entwürfe über einen geschützten Link testbar, ohne dass unveröffentlichte Inhalte versehentlich öffentlich sichtbar oder von Suchmaschinen indexiert werden.

Eine Komponente in script setup ist standardmäßig eine geschlossene Blackbox: Weder ihre reaktiven Variablen noch ihre Funktionen sind vom Elternteil aus per Template-Ref erreichbar, selbst wenn der Ref korrekt gesetzt ist. Das ist bewusstes Design und schützt vor unkontrolliertem Zugriff auf interne Implementierungsdetails, lässt sich aber gezielt mit defineExpose aufheben, wenn ein Elternteil tatsächlich eine bestimmte Methode einer Kindkomponente direkt aufrufen muss, etwa um ein Formular zu validieren oder ein Modal zu öffnen. Wer versteht, wo dieser Zugriff sinnvoll ist und wo er sich besser durch Props und Events ersetzen ließe, vermeidet sowohl unnötig rigide als auch unnötig verworrene Komponentenschnittstellen.

Incremental Static Regeneration verbindet die Auslieferungsgeschwindigkeit statisch generierter Seiten mit der Aktualität server-gerenderter Inhalte, indem einzelne Seiten nach Ablauf einer Cache-Zeit im Hintergrund neu erzeugt werden, ohne dass ein kompletter Rebuild des Projekts nötig wäre. Dieser Artikel zeigt, wie sich ISR in Nuxt über routeRules konfigurieren lässt, wo der Unterschied zu SWR liegt und wie ein praktischer Anwendungsfall mit Produktseiten aussieht.

Feature Flags trennen das Deployment von Code von der Aktivierung eines Features für Nutzer. In Vue-Apps entsteht daraus ein mächtiges Werkzeug für schrittweise Rollouts, A/B-Tests und schnelles Zurückschalten im Fehlerfall, sofern die Composable-Architektur, Typsicherheit und Aufräumdisziplin von Anfang an mitgedacht werden.

Wer Vue 3 mit denselben Patterns wie Vue 2 einsetzt, verschenkt das Potenzial der Composition API. Composables, defineModel, Suspense und reaktive Stores mit Pinia ersetzen fragile Options-API-Konstrukte durch wartbare, testbare und typsichere Vue 3 Patterns, die auch in großen Teams skalieren.

Lazy Loading verschiebt das Laden von Routen, Komponenten, Bildern und Daten auf den Moment, in dem ein Nutzer sie tatsächlich sieht oder anfordert. Mit Vue Router, defineAsyncComponent, Intersection Observer und Suspense lässt sich dieses Prinzip konsequent durch die gesamte Anwendung ziehen.

Daten zu laden klingt trivial – bis die erste API-Anfrage in der Produktion hängt, der Loading-State unklar ist oder veraltete Cache-Daten dem Nutzer ein falsches Bild der Realität zeigen. Vue 3 und Nuxt bieten ausgereifte Primitiven für Data Fetching, die zusammen Caching, Error Handling und SSR-Kompatibilität abdecken.

Barrierefreiheit in Vue-Applikationen ist keine optionale Zusatzanforderung – sie ist technische Qualität. Wer Fokusmanagement, ARIA-Attribute und Keyboard-Navigation von Anfang an in Vue-Komponenten einbaut, baut Interfaces, die für alle Nutzenden zuverlässig funktionieren und gleichzeitig rechtliche Anforderungen wie den European Accessibility Act erfüllen.

„Brauchen wir hier Pinia oder reicht ein Composable?" ist eine der häufigsten Architekturfragen in Vue-3-Projekten. Die Antwort entscheidet darüber, ob globaler State zentralisiert oder verteilt, sichtbar oder verborgen, DevTools-trackbar oder unsichtbar ist. Der falsche Ansatz kostet Monate Debugging-Aufwand, wenn die Anwendung wächst.