Seite 11 - Vue.js

Vue Server Components sind ein noch experimentelles Konzept, das Komponenten beschreibt, die vollständig auf dem Server gerendert werden und dabei keinerlei eigenes JavaScript an den Client ausliefern, nicht einmal für die Hydration. Dieser Artikel ordnet das Konzept ein, grenzt es von klassischem SSR ab, zeigt den aktuellen Entwicklungsstand und vergleicht die Idee mit den bereits produktiv genutzten React Server Components.

axe-core prüft eine gerenderte Seite gegen einen festen Katalog automatisierbarer Barrierefreiheitsregeln, etwa Farbkontrast, fehlende Formular-Labels oder falsch verschachtelte Überschriften, und lässt sich sowohl über @axe-core/playwright in End-to-End-Tests als auch über vitest-axe in Komponententests einbinden. Wichtig ist dabei, die Grenzen automatisierter Prüfung zu kennen, denn Tab-Reihenfolge-Logik und inhaltliche Verständlichkeit lassen sich damit nicht abdecken.

Eine Liste-Komponente, die Zeilen rendert, egal ob es sich um Benutzer, Produkte oder Bestellungen handelt, ist ein klassischer Fall für TypeScript-Generics, doch in einer Vue-Komponente fehlte lange die passende Syntax dafür. Seit Vue 3.3 unterstützt script setup ein eigenes generic-Attribut, mit dem sich Props, Emits und Slots typsicher an einen generischen Typparameter binden lassen, ohne auf any oder unknown auszuweichen. Das Ergebnis sind Komponenten, die sich wie generische Funktionen verhalten: einmal geschrieben, aber für beliebige, konkrete Item-Typen mit voller Autovervollständigung nutzbar.

Component Testing mit Cypress schließt die Lücke zwischen isolierten Unit-Tests und langsamen End-to-End-Läufen. Vue-Komponenten werden dabei tatsächlich im Browser gemountet, mit echtem DOM, echten Events und kontrollierbaren Netzwerkaufrufen, ohne die gesamte Anwendung hochfahren zu müssen.

Eine Komponente, die gleichzeitig Logik verwaltet und HTML rendert, lässt sich kaum wiederverwenden. Renderless Components und Headless Patterns in Vue.js lösen dieses Problem: Die Logik lebt in einem Composable oder einer renderless Komponente, die Darstellung übernimmt der Konsument vollständig per Scoped Slot oder Template.

Admin-Dashboards sind die technisch anspruchsvollsten UIs einer Applikation – sortierbare Datentabellen mit tausenden Einträgen, verschachtelte Filter, URL-synchronisierter Zustand und Bulk-Actions auf ausgewählten Datensätzen stellen hohe Anforderungen an Architektur und Performance. Vue 3's Composition API und Pinia bieten genau die richtigen Werkzeuge, um Admin-Oberflächen wartbar und schnell zu bauen.

Nuxt 3 mit Nitro bietet mehrere Caching-Schichten, die unabhängig voneinander konfiguriert werden können — Server-seitiger Nitro-Cache, ISR mit Stale-While-Revalidate, CDN-Cache-Control-Headers und Edge-Deployment. Die richtige Kombination dieser Schichten macht den Unterschied zwischen einer Anwendung mit 800 ms TTFB und einer mit 40 ms.

Wer in einem Composable mehrere watch, watchEffect und computed anlegt, muss beim Aufräumen jeden einzeln stoppen. Ein Effect Scope bündelt alle diese Effekte in einer Gruppe und beendet sie mit einem einzigen stop() Aufruf, ganz gleich ob innerhalb oder außerhalb einer Komponente.

Nuxt Image abstrahiert die Bildoptimierung hinter einer einzigen Komponenten-API, lässt aber offen, welcher Provider die eigentliche Transformation übernimmt: der eingebaute IPX-Provider verarbeitet Bilder direkt auf dem eigenen Server, während Cloudinary und imgix als externe CDN-Dienste die Arbeit auslagern und dafür eigene Kosten- und Skalierungsmodelle mitbringen. Welcher Provider passt, hängt weniger von der Bildqualität als vielmehr vom Traffic-Volumen, der globalen Verteilung der Nutzer und der bereits vorhandenen Infrastruktur ab.

Composables mocken ist in Vue-Tests komplizierter als es zunächst wirkt, weil Composables oft globalen Zustand, Netzwerkzugriffe und reaktive Nebenwirkungen kombinieren. Mit vi.mock, gezielter Dependency Injection und provide/inject als Testing-Seam lassen sich Komponenten trotzdem zuverlässig isoliert testen, ohne echte Composable-Implementierungen mitzuschleppen.