Tag: Alpine.js

1. Alpine.js x-ignore: Alpine aus CMS-Bereichen ausschließen

   01.02.2026

   CMS-Redakteure können kein Alpine.js, aber sie kopieren HTML aus anderen Quellen – und Attribute wie x-show oder x-data können in fremdem Code versteckt sein. x-ignore deaktiviert Alpine-Parsing für einen gesamten DOM-Bereich und macht CMS-Inhalte sicher.

   Read more

2. Sprach und Währungsumschalter Dropdown mit Alpine.js

   30.01.2026

   Ein Sprach und Währungsumschalter gehört in jedem internationalen Shop zu den am häufigsten benutzten, aber oft am schlechtesten umgesetzten UI Elementen. Mit Alpine.js lässt sich ein Dropdown bauen, das per Tastatur bedienbar ist, seine Auswahl über Sitzungen hinweg speichert und Sprache sowie Währung sauber getrennt oder kombiniert anbietet.

   Read more

3. x-for mit key: Stabile Listen-Updates in Alpine.js

   30.01.2026

   Ohne den key-Modifier verwechselt Alpine bei x-for-Listen DOM-Elemente mit dem falschen Datensatz, sobald Einträge eingefügt, entfernt oder sortiert werden. Ein stabiler, eindeutiger key löst dieses Diffing-Problem und verhindert Fokus-Sprünge, falsche Animationen und vertauschten Formular-Zustand.

   Read more

4. Alpine.js Re-Renders von Komponenten profilen

   24.01.2026

   Alpine.js Re-Renders funktionieren grundlegend anders als in React oder Vue, weil kein virtueller DOM verglichen wird, sondern jede reaktive Property einzeln über einen Proxy verfolgt wird. Genau diese Feinkörnigkeit macht das Profiling wichtig: überflüssige Effect Ausführungen bleiben oft unbemerkt, bis eine komplexe Komponente spürbar ruckelt und die genaue Ursache gesucht werden muss.

   Read more

5. Alpine.js Carousel Slider: Touch-Support und Keyboard-Navigation

   23.01.2026

   Swiper.js und Slick kommen mit Hunderten von Kilobytes und eigenen JavaScript-Ökosystemen. Ein produktionsreifer Carousel-Slider für Hyvä braucht weder das eine noch das andere – Alpine.js reicht aus für Touch, Keyboard, Auto-Play und ARIA.

   Read more

6. Vertikale Timeline mit Alpine.js gestalten: Scroll-Reveal und Layout

   04.01.2026

   Eine vertikale Timeline Komponente zeigt Ereignisse chronologisch entlang einer senkrechten Linie und aktiviert Etappen beim Scrollen. Mit CSS Grid für das Layout und Alpine.js x-intersect für Scroll-Reveal Animationen entsteht eine flexible Timeline Komponente, ohne eine dedizierte Timeline Bibliothek einzubinden.

   Read more

7. Alpine.js Mehrfeld-Validierungsgruppen strukturieren

   26.12.2025

   Wer ein Checkout-Formular mit Liefer- und Rechnungsadresse, Zahlungsdaten und Kontaktangaben nur mit einem einzigen globalen Fehlerobjekt validiert, verliert schnell den Überblick. Eine durchdachte Validierungsgruppe pro fachlichem Abschnitt macht Fehler pro Bereich sichtbar, hält Alpine-Komponenten wartbar und erleichtert Screenreader-Nutzern die Orientierung im Formular.

   Read more

8. Sticky Add to Cart Bar beim Scrollen mit Alpine.js

   25.12.2025

   Sobald der Kunde am ursprünglichen Add-to-Cart-Button vorbeigescrollt ist, übernimmt eine schlanke Sticky Add to Cart Bar am unteren Bildschirmrand. Mit x-intersect statt eines eigenen Scroll-Listeners lässt sich dieses Muster performant und ohne Layout-Thrashing umsetzen, synchron mit Variantenauswahl und Menge im Hauptformular.

   Read more

9. window und outside Modifier für globale Event Listener | Alpine.js

   19.12.2025

   Der Alpine.js window Modifier registriert Listener direkt auf dem window-Objekt und räumt sie automatisch auf, sobald die Komponente aus dem DOM verschwindet. Zusammen mit @click.outside entstehen Dropdowns, Modals und globale Tastatur-Shortcuts ganz ohne manuelles addEventListener und removeEventListener im Komponenten-Code.

   Read more

10. Alpine.js Custom Plugin erstellen: Schritt für Schritt

    17.12.2025

    Die Alpine.js Plugin-API ermöglicht es, eigene Direktiven wie x-tooltip, magische Properties wie $format und globale Stores zu registrieren – und diese Erweiterungen sauber gebündelt in jedem Alpine-Projekt wiederzuverwenden.

    Read more