Seite 2 - Vue.js

Module Federation lädt Vue-Komponenten erst im Browser aus getrennt deployten Anwendungen nach, statt sie zur Build-Zeit einzubinden. Das ermöglicht unabhängige Deployments über Teamgrenzen hinweg, verlangt aber eine bewusste Strategie für geteilte Abhängigkeiten, Versionskonflikte und Fallbacks, wenn ein Remote nicht erreichbar ist.

Pinia ist nicht einfach nur Vuex 5 mit anderem Namen — es ist ein grundlegend anderer Ansatz, der die Composition API konsequent nutzt. Wer Pinia nur als Datenspeicher nutzt, verschenkt das Potenzial von Store-Komposition, typsicheren Actions und reaktiven Getters. Dieser Artikel zeigt, wie State Management mit Pinia in Vue 3 von Grund auf richtig aufgebaut wird.

Reactivity Transform versprach reaktive Werte ohne .value, direkt destrukturierbar wie normale Variablen. Das Compiler-Experiment wurde 2023 offiziell verworfen. Wer heute alten Code oder Blogposts dazu liest, sollte verstehen, wie es funktionierte, warum es scheiterte und was für die Praxis übrig bleibt.

Ein Nuxt Hydration Mismatch zeigt sich meist als kryptische Konsolen-Warnung, die selten direkt auf die Ursache verweist. Mit einer festen Debugging-Reihenfolge, von der Warnungs-Interpretation über typische Ursachen wie Datum und Zufallszahlen bis zu ClientOnly und v-if als Werkzeug, lässt sich jeder Hydration Mismatch systematisch statt zufällig gefunden werden.

Nuxt DevTools ist kein Browser-Plugin, sondern ein direkt in den Dev-Server eingebettetes Panel, das Module, Komponenten-Graph, Server-Routes, Assets und Build-Zeiten sichtbar macht, ohne Kontextwechsel zwischen Terminal, Editor und Extension. Wer Nuxt-3-Projekte betreut, findet damit die Ursache vieler Probleme schneller als über verstreute Logausgaben.

Nuxt SEO geht weit über title-Tags hinaus. useSeoMeta, korrekte Canonical-URLs, vollständige Open-Graph-Implementierung und JSON-LD strukturierte Daten bestimmen gemeinsam, wie gut eine Nuxt-App von Suchmaschinen verstanden und in Social Media dargestellt wird.

Vue mit Magento GraphQL zu verbinden bedeutet mehr als einen Fetch-Aufruf gegen einen Endpunkt. Fragmente, Fehlerbehandlung, Caching und der Umgang mit Schema-Änderungen entscheiden, ob die Integration wartbar bleibt oder bei jedem Magento Update zum Risiko wird.

Die Wahl des richtigen Nuxt Auth Moduls entscheidet über Wochen an Entwicklungszeit und über die langfristige Wartbarkeit der Authentifizierung. sidebase-nuxt-auth, nuxt-auth-utils und ein selbst gebautes JWT System verfolgen grundlegend unterschiedliche Ansätze, die sich für unterschiedliche Projektgrößen eignen.

Vue 3 Reaktivität ist keine Magie — sie ist ein präzises System aus JavaScript Proxy, Dependency-Tracking und Scheduling. Wer versteht, wie ref(), reactive(), computed() und watch() intern arbeiten, macht keine Reaktivitätsfehler mehr, wählt das richtige Tool für jeden Anwendungsfall und weiß sofort, warum eine Komponente sich nicht neu rendert. Dieser Artikel erklärt das Reaktivitätssystem vollständig und praxisnah.

Hydration Mismatches in Vue und Nuxt gehören zu den frustrierendsten Debugging-Erfahrungen in der SSR-Entwicklung. Die Browserkonsole zeigt "Hydration completed but contains mismatches", das UI flackert, und der Fehler ist schwer zu reproduzieren. Dieser Artikel erklärt die Ursachen systematisch und zeigt, wie man sie dauerhaft behebt.