Seite 9 - Vue.js

AI generated

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

Maxim Mironjuk - März 28, 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.

Vue.js Testing/E2E

AI generated

Composables mocken in Vue-Tests: Strategien und Fallstricke

Maxim Mironjuk - März 19, 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.

Magento Vue.js

AI generated

Vue Produktkonfigurator: Varianten, Attribute und Live-Preisberechnung

Maxim Mironjuk - März 19, 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.

Vue.js

AI generated

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

Maxim Mironjuk - März 15, 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.

JavaScript Vue.js

AI generated

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

Maxim Mironjuk - März 14, 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.

Vue.js Web Performance

AI generated

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

Maxim Mironjuk - März 06, 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.

Vue.js

AI generated

Team Patterns für Vue Code Reviews

Maxim Mironjuk - Februar 22, 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.

Vue.js

AI generated

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

Maxim Mironjuk - Februar 17, 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.

Vue.js

AI generated

Nuxt Content: Markdown basierte Seiten richtig aufbauen

Maxim Mironjuk - Februar 14, 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.

Vue.js

AI generated

Fehlerseiten, Fallbacks und Error Boundaries in Vue & Nuxt

Maxim Mironjuk - Februar 14, 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.