Seite 10 - Vue.js

@nuxtjs/i18n ist das De-facto-Standardmodul, um eine Nuxt-Anwendung in mehreren Sprachen auszuliefern, und deckt dabei weit mehr ab als reine Textübersetzung: Es entscheidet über die URL-Struktur pro Sprache, lädt Übersetzungsdateien nur bei Bedarf nach und generiert die für internationales SEO nötigen hreflang-Tags automatisch. Wer die Routing-Strategie einmal falsch wählt, muss später oft die komplette URL-Struktur der Seite migrieren, weshalb sich eine bewusste Entscheidung am Anfang eines Projekts auszahlt.

Responsive Vue Komponenten scheitern oft an reinen CSS-Media-Queries, weil sich Komponenten in unterschiedlichen Layout-Kontexten unterschiedlich verhalten müssen, unabhängig von der Viewport-Breite. Container Queries, eigene Breakpoint-Composables und adaptive Slot-Strukturen lösen das strukturell statt mit immer mehr CSS-Ausnahmen.

Pinia Stores isoliert zu testen erfordert mehr als nur einen Store zu instanziieren und eine Action aufzurufen. Zwischen createPinia und createTestingPinia, echten und gemockten Actions sowie Store-übergreifenden Abhängigkeiten liegen Entscheidungen, die über Aussagekraft und Wartbarkeit einer gesamten Testsuite entscheiden.

Dark Mode mit einem einfachen Klasse-Toggle zu implementieren ist der erste Schritt. Ein professionelles Theme-System mit Design Tokens, System-Präferenz-Erkennung, Persistenz und flimmerfreiem SSR-Laden ist das, was Nutzern in der Praxis tatsächlich zugutekommt. Vue 3 bietet alle Bausteine – es geht darum, sie richtig zusammenzusetzen.

runtimeConfig eignet sich für Werte, die sich nach dem Build noch ändern können, etwa weil derselbe Docker-Container in mehreren Umgebungen mit unterschiedlichen API-Endpunkten läuft. Der Unterschied zwischen public- und privaten Werten entscheidet dabei direkt darüber, ob ein Wert versehentlich als Secret im Client landet.

Nuxt-Module sind das Werkzeug, mit dem sich Build-Prozess, Runtime und sogar die Entwicklerwerkzeuge eines Nuxt-Projekts erweitern lassen. In diesem Artikel bauen wir Schritt für Schritt ein eigenes Modul, das einen Hook in den Build-Prozess einklinkt, typsichere Optionen mitbringt und am Ende ein eigenes Tab in den Nuxt DevTools registriert.

Micro-Interactions machen den Unterschied zwischen einer App, die sich funktional anfühlt, und einer, die sich gut anfühlt. In Vue.js lassen sich diese kleinen Feedbacks — Hover-Effekte, State-Übergänge, Button-Bestätigungen — mit CSS Transitions und der Vue Transition-Komponente implementieren, ohne eine einzige Animationsbibliothek zu installieren.

Vue 3 Breaking Changes verstecken sich selten im offensichtlichen Code, sondern in v-model-Syntax, entfernten Filtern, umgebauter Global API und dem gestrichenen Event Bus. Diese Checkliste arbeitet die wichtigsten Änderungen systematisch ab, jede mit konkretem Vorher-Nachher-Beispiel, damit bei der Migration nichts übersehen wird.

Sobald mehrere Teams an derselben Vue-Anwendung arbeiten, wird ein monolithisches Frontend zum Flaschenhals. Micro Frontends teilen eine Vue-Anwendung entlang von Domänengrenzen auf, sodass jedes Team unabhängig entwickeln, testen und deployen kann, ohne auf einen gemeinsamen Release-Zug warten zu müssen.

Vue Memory Leaks entstehen fast immer an denselben drei Stellen: vergessene Event-Listener, nicht gestoppte Timer und Watcher ohne Cleanup beim Unmounten einer Komponente. Mit Chrome-Devtools-Heap-Snapshots lässt sich jeder Verdacht belastbar bestätigen, statt auf Basis von Vermutungen Code zu ändern, der das eigentliche Leck gar nicht betrifft.