Vue.js

Ein Scoped Slot transportiert Daten von der Kindkomponente zurück ins Template des Elternteils, doch ohne explizite Typisierung sieht TypeScript diese Daten lange Zeit nur als any. Ein Tippfehler wie item.näm statt item.name fällt dann erst im Browser auf, nicht schon beim Kompilieren. defineSlots() schließt genau diese Lücke: Jeder Slot bekommt einen echten TypeScript-Typ für seine Scoped-Slot-Props, inklusive vollständiger Autovervollständigung direkt im Template der einbindenden Komponente, ganz ohne zusätzliche Laufzeit-Validierung.

Vue Capacitor verbindet eine bestehende Vue-Anwendung mit einer nativen Laufzeitumgebung, ohne die Codebasis aufzuspalten. Kamera, Geolocation, Push-Benachrichtigungen und Dateisystem werden über eine einheitliche JavaScript-API angesprochen, während die App als echtes iOS- und Android-Binary im jeweiligen Store landet.

Ohne Rate Limiting kann ein einzelner Client eine Nuxt Server Route mit tausenden Requests pro Sekunde überlasten, sei es durch einen fehlerhaften Client, einen Bot oder einen gezielten Angriff. Token Bucket Algorithmen, Redis basiertes Limiting und ein korrektes 429 Fehlerformat schützen die API, ohne legitime Nutzer auszubremsen.

Mock Service Worker fängt HTTP-Anfragen an der Netzwerkschnittstelle ab, bevor sie überhaupt versendet werden, statt einzelne JavaScript-Funktionen wie Axios-Aufrufe zu ersetzen. Das macht Vue-Tests realistischer, weil der komplette Anfrage-Antwort-Zyklus durchlaufen wird, inklusive Statuscodes, Headern und Fehlerpfaden, ohne dass der Testcode wissen muss, welche HTTP-Bibliothek eine Komponente intern verwendet.

Data Loaders sind eine neue Funktion in Vue Router 4.4+, die Datenanfragen direkt an eine Route bindet und sie ausführt, bevor die Navigation abgeschlossen wird, statt Daten erst nach dem Mount der Zielkomponente über onMounted nachzuladen. Das verschiebt Verantwortung für Ladezustand und Fehlerbehandlung aus einzelnen Komponenten in eine zentrale, von Vue Router verwaltete Schicht.

computed, watch und watchEffect sind die drei Reaktivitäts-Primitive der Vue 3 Composition API – und alle drei lösen verschiedene Probleme. Wer sie verwechselt, schreibt entweder unnötige Seiteneffekte, verzichtet auf Caching oder debuggt endlose Watcher-Kaskaden, die ein computed in einer Zeile gelöst hätte.

Nuxt Content Studio setzt eine visuelle Editor-Oberfläche auf die Markdown-Dateien eines Nuxt-Content-Projekts, sodass Redakteure ohne Git-Kenntnisse Inhalte pflegen können, während Entwickler weiterhin dieselben Dateien im Repository sehen. Der Ansatz unterscheidet sich damit deutlich von einem klassischen Headless-CMS mit eigener Datenbank, bleibt aber bei Preview-Deployments und Redaktions-Reviews näher an einem vollwertigen CMS-Workflow, als es reine Datei-Bearbeitung im Editor je könnte.

Nitro, der Server-Engine hinter Nuxt 3, bringt mit unstorage eine einheitliche Key-Value-Schnittstelle mit, die sich wahlweise auf Redis, das lokale Dateisystem, Cloudflare KV oder einfachen Arbeitsspeicher stützen kann, ohne dass der Anwendungscode etwas von der konkreten Anbindung wissen muss. Wer serverseitige API-Antworten zwischenspeichern will, kommt damit ohne eine zusätzliche Cache-Bibliothek aus und tauscht den Storage-Treiber je nach Umgebung einfach in der Konfiguration aus.

Nuxt 3 kann komplette Anwendungen als reine statische Dateien generieren, ganz ohne Node.js Server im Betrieb. Wer diesen Weg über nuxt generate und Static Site Generation konsequent nutzt, bekommt minimale Betriebskosten, maximale Ausfallsicherheit und Auslieferung über ein globales Edge Netzwerk auf Plattformen wie Netlify, Vercel oder Cloudflare Pages.

REST-Endpunkte zu ersetzen ist nicht das Ziel von GraphQL – das Ziel ist, genau die Daten zu laden, die eine Komponente braucht, und sie im richtigen Moment zu cachen. Wer Vue GraphQL ohne Cache-Strategie betreibt, lädt dieselben Daten mehrfach und verliert den größten Vorteil des Ansatzes.