Alpine.js

AI generated

x-ref statt document.querySelector: DOM-Referenzen in Alpine.js richtig nutzen

10.04.2025

document.querySelector greift global auf die gesamte Seite zu und bricht, sobald eine Komponente mehrfach vorkommt. x-ref und $refs lösen dieses Problem, indem sie DOM-Elemente komponentenscoped und ohne CSS-Selektor-Fragilität referenzieren, für Fokus-Management, Formulare und Scroll-Ziele.

AI generated

Dark-Mode-Farbschema-Übergänge ohne Flackern (FOUC)

07.04.2025

Ein Dark-Mode-Toggle, der erst nach der Alpine-Initialisierung greift, zeigt beim Laden der Seite kurz das falsche Farbschema, bevor er umschaltet. Dieser Flash of Unstyled Content ist kein Alpine-spezifisches Problem, sondern eine Frage der Reihenfolge: Wer das Theme vor dem ersten sichtbaren Frame setzt statt danach, wird das Flackern vollständig los, ganz ohne zusätzliche Bibliothek.

AI generated

Produktvergleichstabelle mit filterbaren Spalten in Alpine.js bauen

04.04.2025

Eine Vergleichstabelle klingt zunächst nach einem simplen HTML-Table mit ein paar Spalten. Sobald aber mehrere Produkte mit unterschiedlich vielen Attributen nebeneinander stehen sollen, eine Nur-Unterschiede-Ansicht gewünscht ist und die Tabelle auch auf einem Smartphone noch bedienbar bleiben muss, wird daraus eine echte kleine Anwendung mit eigenem Zustand. Alpine.js eignet sich für genau diese Aufgabe gut, weil sich Zeilen- und Spaltenlogik komplett deklarativ im Markup abbilden lassen, ohne dass ein eigenes Build-Tooling oder ein Framework wie React nötig wäre.

AI generated

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.

AI generated

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.

AI generated

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.

AI generated

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.

AI generated

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.

AI generated

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.

AI generated

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.