Vue.js: Anleitungen und Praxiswissen | mironsoft Blog
Vue.js
-
10.05.2026
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.
-
10.05.2026
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.
-
06.05.2026
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.
-
30.04.2026
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.
-
29.04.2026
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.
-
29.04.2026
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.
-
28.04.2026
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.
-
25.04.2026
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.
-
24.04.2026
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.
-
22.04.2026
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.