Tag: Vue.js

1. Vue Testing mit Vitest und Testing Library: Komponenten richtig testen

   14.02.2025

   Vue Testing ist dann effektiv, wenn Tests das Verhalten aus Nutzersicht prüfen – nicht Implementierungsdetails. Vitest als blitzschneller Test-Runner und Vue Testing Library als nutzerorientiertes Test-Framework sind die Kombination, die robuste Tests erzeugt, die Refactoring überleben.

   Read more

2. Volar vs. Vue Language Server: IDE-Tooling für Vue 3 im Vergleich

   10.02.2025

   Volar ist der Name der VS-Code-Extension, der zugrundeliegende Vue Language Server ist das eigentliche Sprachserver-Backend, das Typüberprüfung, Autovervollständigung und Fehlerdiagnose in Single File Components bereitstellt. Wer versteht, wie beide Ebenen zusammenspielen, löst IDE-Probleme in Vue-3-Projekten deutlich gezielter, statt wahllos Erweiterungen zu installieren und wieder zu deinstallieren.

   Read more

3. Infinite Scroll, Pagination und Suchfilter mit Vue sauber verbinden

   06.02.2025

   Wer Infinite Scroll, Pagination und Suchfilter nachträglich zusammenführt, kämpft mit Race Conditions, doppelten Requests und verlorenen URL-States. Vue.js bietet mit Composables, watchEffect und reaktiven Query-Parametern alle Werkzeuge, um diese drei Mechanismen von Anfang an sauber zu einer stabilen Such-UI zu verbinden.

   Read more

4. Vue Reaktivitäts-Performance: shallowRef, markRaw, toRaw

   04.02.2025

   Wer jedes Objekt in Vue 3 blind mit reactive umwandelt, zahlt bei großen Datenmengen einen messbaren Proxy-Overhead. Diese Vue Reaktivitäts Performance Anleitung zeigt, wie shallowRef, shallowReactive, markRaw und toRaw das Reaktivitätssystem gezielt entlasten, ohne Funktionalität zu verlieren.

   Read more

5. VueUse in der Praxis: Composables für den Alltag richtig einsetzen

   01.02.2025

   VueUse bündelt über zweihundert fertige Composables für Storage, Sensoren, Zeitgeber und Browser-APIs. Wer diese Bibliothek gezielt statt pauschal einsetzt, spart nicht nur Zeit beim Schreiben eigener Utility-Funktionen, sondern reduziert auch Bugs bei Edge-Fällen wie SSR, Cleanup und Reaktivität, die in selbst geschriebenen Composables leicht übersehen werden.

   Read more

6. Headless UI, Radix Vue und Komponentenbibliotheken vergleichen

   24.01.2025

   Die Wahl der richtigen Vue 3-Komponentenbibliothek entscheidet über Accessibility, Bundle-Größe und wie viel Design-Kontrolle das Team behält. Headless UI, Radix Vue, shadcn/vue, PrimeVue und Naive UI verfolgen grundlegend verschiedene Philosophien – dieser Artikel zeigt, welche für welchen Kontext die richtige ist.

   Read more

7. Vue Composition API sauber strukturieren statt Setup-Chaos

   21.01.2025

   Die Composition API gibt Entwicklern maximale Freiheit bei der Strukturierung von Komponenten – und genau das ist das Problem. Ohne klare Konventionen wachsen setup()-Funktionen zu unlesbaren Blöcken mit hundert Zeilen vermischter Logik. Dieser Guide zeigt, wie die Vue Composition API so strukturiert wird, dass Komponenten wartbar bleiben, auch wenn sie komplex werden.

   Read more

8. Nuxt Image Modul: Bildoptimierung und Lazy Loading in der Praxis

   17.01.2025

   Unoptimierte Bilder sind auf den meisten Websites die größte einzelne Ursache für schlechte Core Web Vitals. Das Nuxt Image Modul automatisiert Formatkonvertierung, responsive Größen und Lazy Loading, sodass eine einzige Komponente aus einem rohen Upload das passende Bild für jedes Gerät und jede Netzwerkverbindung generiert, ohne manuelle Bildbearbeitung im Vorfeld.

   Read more

9. Options API zu Composition API schrittweise migrieren

   12.01.2025

   Die Migration von der Options API zur Composition API muss keine Komponente auf einmal komplett umbauen. Vue 3 erlaubt beide Stile im selben Projekt gleichzeitig, wodurch data, methods und computed Komponente für Komponente sauber in die Composition API übersetzt werden können, während der Rest der Anwendung unverändert weiterläuft.

   Read more

10. Transitionen in Vue: Was wirklich smooth ist und was nur blinkt

    05.01.2025

    Vue Transitionen sind mächtig, aber voller versteckter Fallen. Ein falsch gesetztes CSS-Property löst Layout Reflow aus und macht die Animation ruckelig. Ein fehlender key-Wechsel lässt Elemente verschwinden, ohne dass Transition überhaupt ausgelöst wird. Dieser Artikel erklärt, wie Vue Transitionen tatsächlich funktionieren, welche CSS-Properties smooth laufen und welche Muster in der Praxis zuverlässig schöne Animationen liefern.

    Read more