Tag: Alpine.js

1. Alpine.js Multi-Step Form Wizard mit Validierung

   04.04.2025

   Mehrstufige Formulare erhöhen die Conversion, wenn sie UX-technisch sauber umgesetzt sind: klare Fortschrittsanzeige, Validierung pro Schritt statt erst beim Submit, und zuverlässige Rückwärtsnavigation ohne Datenverlust. Mit Alpine.js lässt sich dieses Pattern ohne externe Bibliothek vollständig realisieren.

   Read more

2. Alpine.js x-data: Komponenten-State richtig strukturieren

   03.04.2025

   x-data ist das Herzstück jeder Alpine.js Komponente. Wer State-Scope falsch einschätzt, landet bei unerwarteten Reaktivitäts-Effekten und schwerem Refactoring. Dieses Tutorial zeigt, wie man State korrekt abgrenzt, wiederverwendet und zwischen Komponenten kommuniziert.

   Read more

3. Mengenauswahl Stepper Input Komponente mit Alpine.js

   30.03.2025

   Ein Mengenauswahl-Stepper wirkt trivial, ist aber voller Detailfragen: Was passiert bei manueller Eingabe eines ungültigen Werts? Wie wird der Lagerbestand als Obergrenze respektiert? Wie funktioniert die Bedienung ohne Maus? Mit Alpine.js lässt sich ein Stepper bauen, der all das sauber löst, ohne eine externe Formularbibliothek zu benötigen.

   Read more

4. Alpine.js testen: Einheitstests mit Testing Library

   29.03.2025

   Alpine.js-Komponenten zu testen ist nicht offensichtlich: Das Framework ist eng an das DOM gekoppelt, was spezielle Test-Setups erfordert. Mit Vitest, jsdom und @testing-library/dom lassen sich reaktive Alpine-Komponenten zuverlässig, wartbar und schnell testen.

   Read more

5. Mega Menu Dropdown barrierefrei mit Alpine.js

   25.03.2025

   Ein Mega Menu Dropdown mit mehrspaltigen Unterkategorien ist eines der komplexesten Navigationsmuster im E-Commerce, und eines der am häufigsten falsch umgesetzten in Bezug auf Barrierefreiheit. Mit Alpine.js, dem Disclosure-Pattern statt falscher Menu-Rollen und sauberer Tastatursteuerung lässt sich ein Mega Menu bauen, das für Maus, Tastatur und Screenreader gleichermaßen funktioniert.

   Read more

6. Eigener Datepicker mit Alpine.js – Kalender ohne Flatpickr

   24.03.2025

   Flatpickr bringt Kilobytes jQuery-Erbe und eine externe Abhängigkeit mit. Ein eigener Alpine.js-Datepicker entsteht aus weniger als 80 Zeilen reaktivem JavaScript – mit Monatsnavigation, Keyboard-Support, Min/Max-Grenzen und vollständiger ARIA-Semantik, ohne eine einzige externe Abhängigkeit.

   Read more

7. Kanban Board mit Alpine.js: Drag and Drop ohne Bibliothek bauen

   22.03.2025

   Ein Kanban Board mit Spalten, verschiebbaren Karten und persistentem Zustand lässt sich vollständig mit Alpine.js und der nativen HTML5 Drag and Drop API umsetzen. Kein SortableJS, kein jQuery UI, kein zusätzliches Kilobyte JavaScript, dafür volle Kontrolle über Verhalten, Barrierefreiheit und Darstellung des Boards.

   Read more

8. Preistabelle mit Monats Jahres Umschalter mit Alpine.js

   12.03.2025

   Eine Preistabelle mit Umschalter zwischen monatlicher und jährlicher Abrechnung ist bei SaaS-Produkten und Abo-Modellen Standard, weil sie den Jahresrabatt direkt sichtbar macht und die Kaufentscheidung erleichtert. Mit Alpine.js entsteht eine Preistabelle, die Beträge reaktiv umrechnet, Rabatt-Badges anzeigt und den empfohlenen Tarif hervorhebt, komplett ohne Page Reload und ohne serverseitige Logik im Frontend.

   Read more

9. Alpine.js v3 — Alle Direktiven auf einen Blick

   10.03.2025

   Alpine.js v3 bietet 15 Direktiven, 6 magische Properties und 3 globale Methoden. Wer alle davon kennt und den richtigen Einsatzort versteht, schreibt interaktive UIs ohne Build-Step, ohne Virtual DOM und ohne die Komplexität großer Frameworks – direkt im HTML, reaktiv und wartbar.

   Read more

10. ARIA-Attribute automatisieren: Accessibility mit Alpine.js

    01.03.2025

    Barrierefreiheit ist keine optionale Ergänzung – sie ist eine gesetzliche Anforderung und ein Qualitätsmerkmal. Alpine.js macht es einfach, ARIA-Attribute reaktiv mit dem UI-Zustand zu synchronisieren: aria-expanded folgt automatisch dem Toggle-State, aria-hidden wird dynamisch gesetzt, und Fokus-Traps halten den Keyboard-Fokus im richtigen Kontext.

    Read more