Tag: Vue.js

1. Effect Scope in Vue 3: sauberes Cleanup für Composables

   28.03.2025

   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.

   Read more

2. Composables mocken in Vue-Tests: Strategien und Fallstricke

   19.03.2025

   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.

   Read more

3. Vue Produktkonfigurator: Varianten, Attribute und Live-Preisberechnung

   19.03.2025

   Ein Vue Produktkonfigurator für konfigurierbare Magento Produkte muss Attribute, Varianten, Preis und Verfügbarkeit synchron halten, ohne bei jeder Auswahl einen kompletten Seitenreload auszulösen. Mit der richtigen Datenstruktur gelingt das mit einer einzigen initialen Ladeanfrage.

   Read more

4. Slots und Scoped Slots für flexible UI-Komponenten in Vue.js

   15.03.2025

   Props machen Komponenten konfigurierbar. Slots machen sie erweiterbar. Scoped Slots geben dem Konsumenten die Kontrolle über die Darstellung — während die Komponente die Logik behält. Wer Slots und Scoped Slots in Vue.js wirklich versteht, baut Komponenten, die sich in jedem Kontext nahtlos einfügen.

   Read more

5. Touch Gesten in Vue Apps: Swipe, Drag und Pinch implementieren

   14.03.2025

   Touch Gesten in Vue Apps scheitern selten an der Grundidee, sondern an Details wie Scroll-Konflikten, fehlender Passive-Event-Konfiguration und ruckelnden Animationen unter Last. Mit Pointer Events, VueUse-Composables und sauberer Trennung von Erkennung und Reaktion lassen sich Swipe-to-Delete, Drag-and-Drop und Pinch-to-Zoom robust und performant umsetzen.

   Read more

6. Vue 3 Compiler Optimierungen verstehen: Block Tree, Patch Flags, Hoisting

   06.03.2025

   Der Vue 3 Template Compiler analysiert jedes Template zur Build-Zeit und erzeugt Render-Funktionen, die bereits wissen, welche Teile sich zur Laufzeit ändern können. Wer diese Compiler Optimierungen versteht, kann Templates so schreiben, dass sie davon maximal profitieren, statt versehentlich langsame Fallback-Pfade auszulösen.

   Read more

7. Team Patterns für Vue Code Reviews

   22.02.2025

   Code Reviews in Vue-Teams scheitern oft nicht am Willen, sondern am fehlenden Framework. Ohne klare Kriterien werden Reviews zu subjektiven Stildebatten statt zu echten Qualitätschecks. Dieser Artikel zeigt, welche Prüfmuster wirklich wichtig sind — von Komponenten-Design über Reaktivitätsfehler bis zu Pinia-Store-Qualität und TypeScript-Integration.

   Read more

8. Vue Router praktisch nutzen: Nested Routes, Guards und Scroll Behavior

   17.02.2025

   Vue Router ist weit mehr als ein URL-Switcher. Wer Nested Routes, Navigation Guards und gezieltes Scroll-Verhalten sauber einsetzt, baut Single-Page-Applications, die sich wie echte Webanwendungen anfühlen – mit kontrolliertem Zugriff, sauberem Ladeverhalten und keiner einzigen unerwarteten Scrollposition.

   Read more

9. Nuxt Content: Markdown basierte Seiten richtig aufbauen

   14.02.2025

   Nuxt Content verwandelt ein einfaches Verzeichnis mit Markdown Dateien in eine vollwertige, durchsuchbare Datenquelle mit automatischem Routing, Query Builder und Vue Komponenten direkt im Text. Wer Dokumentation, Blogs oder Marketingseiten ohne externes CMS pflegen will, findet in Nuxt Content das fehlende Bindeglied zwischen statischem Text und dynamischer Vue Anwendung.

   Read more

10. Fehlerseiten, Fallbacks und Error Boundaries in Vue & Nuxt

    14.02.2025

    Fehler in Vue-Anwendungen, die den kompletten Komponentenbaum zum Absturz bringen, sind vermeidbar. onErrorCaptured, der globale errorHandler, error.vue und NuxtErrorBoundary bilden ein mehrschichtiges System, das Fehler isoliert, sinnvolle Fallbacks zeigt und den Rest der Anwendung am Leben hält.

    Read more