Tag: Vue.js

1. Pinia Stores isoliert testen: Actions, Getters und Plugins

   04.05.2025

   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.

   Read more

2. Vue Dark Mode, Theming und Design Tokens in Vue Apps

   04.05.2025

   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.

   Read more

3. Micro-Interactions in Vue ohne Overengineering

   27.04.2025

   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.

   Read more

4. Vue 3 Breaking Changes Checkliste für die Migration

   27.04.2025

   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.

   Read more

5. Micro Frontends mit Vue: Strategien für große Teams

   25.04.2025

   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.

   Read more

6. Vue Memory Leaks aufspüren und beheben

   23.04.2025

   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.

   Read more

7. Component Testing mit Cypress für Vue: Setup, Mocking und Praxis

   10.04.2025

   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.

   Read more

8. Renderless Components und Headless Patterns in Vue.js

   06.04.2025

   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.

   Read more

9. Admin-Oberflächen mit Vue 3: Tabellen, Filter und Bulk-Actions

   01.04.2025

   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.

   Read more

10. Nuxt Caching und Edge-Strategien verstehen

    29.03.2025

    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.

    Read more