Tag: Alpine.js

1. Alpine.js als Ergänzung zu Web Components: Custom Elements richtig integrieren

   01.06.2025

   Native Web Components lösen Kapselung und Wiederverwendbarkeit auf Browser-Ebene, bringen aber selbst keine deklarative Reaktivität mit. Alpine.js als Ergänzung zu Web Components übernimmt genau diese Lücke: x-data steuert das Verhalten außerhalb eines Custom Elements, während Attribute und Events die Kommunikation über die Shadow-DOM-Grenze hinweg sauber strukturieren.

   Read more

2. x-show vs. x-if in Alpine.js: Wann welches Verhalten sinnvoll ist

   26.05.2025

   x-show und template x-if lösen beide bedingtes Rendern, aber mit fundamental unterschiedlichem DOM-Verhalten. Wer die Unterschiede bei Lifecycle-Hooks, Transitions und Performance kennt, trifft die Wahl gezielt statt zufällig, und vermeidet unnötige Re-Initialisierungen oder aufgeblähtes DOM.

   Read more

3. Event Delegation Pattern in Alpine.js Komponenten

   19.05.2025

   Event Delegation nutzt das native Bubbling-Verhalten des DOM, um mit einem einzigen Listener am Container jedes Kind-Element zu bedienen, statt in einer x-for-Schleife einen Listener pro Listenelement zu registrieren. Dieser Artikel zeigt, wie das Pattern in Alpine.js-Komponenten konkret umgesetzt wird und wo seine Grenzen liegen.

   Read more

4. Alpine.js und Livewire: Serverseitige Reaktivität richtig kombinieren

   03.05.2025

   Wer Alpine.js und Livewire ohne klare Trennlinie mischt, produziert unnötige Server-Roundtrips und Zustände, die beim Re-Render verschwinden. Mit entangle, gezieltem Event-Dispatching und einer sauberen Aufgabenteilung zwischen Server-State und Client-State werden hybride Komponenten im TALL Stack vorhersehbar und performant.

   Read more

5. Alpine.js x-anchor: Tooltips und Popovers korrekt positionieren

   01.05.2025

   Tooltips, die am Rand des Viewports abgeschnitten werden, Dropdowns, die hinter anderen Elementen verschwinden, und Popovers, die nicht mit dem Scroll-Position synchron bleiben – all das löst das x-anchor-Plugin von Alpine.js mit der Floating-UI-Engine, automatischem Flip-Verhalten und Scroll-Awareness.

   Read more

6. URL-basiertes Tab-System ohne Router mit Alpine.js

   01.05.2025

   Tabs die nach dem Reload wieder denselben Tab zeigen, die Zurück-Schaltfläche des Browsers unterstützen und als Deep-Link per E-Mail teilbar sind – das sind keine SPA-Features. Das ist URL-Hygiene mit zehn Zeilen Alpine.js und der nativen History-API des Browsers.

   Read more

7. Alpine.js Infinite Scroll – Nachladen ohne externe Bibliothek

   26.04.2025

   Der Intersection Observer ist eine native Browser-API, die erkennt, wenn ein Element in den sichtbaren Bereich scrollt – ohne Scroll-Event-Listener, ohne Performance-Einbußen. In Kombination mit Alpine.js und der Magento-REST-API entsteht ein vollständiges Infinite-Scroll-System in weniger als 60 Zeilen.

   Read more

8. Keyboard-navigierbares Dropdown mit Alpine.js

   26.04.2025

   Ein Dropdown das sich nur mit der Maus bedienen lässt, ist für Tastatur-Nutzer und Screen-Reader-Nutzer nutzlos. Das WAI-ARIA Listbox-Pattern definiert präzise, wie Pfeiltasten, Home, End, Escape und Type-Ahead in einem Dropdown funktionieren müssen – und Alpine.js macht die Implementierung überraschend elegant.

   Read more

9. Alpine.js vs. Vue 3 Composition API — Direkter Vergleich

   18.04.2025

   Vue 3 und Alpine.js teilen dieselbe ideologische DNA: beide setzen auf deklaratives Template-Rendering, reaktiven State und ein direktiven-basiertes HTML-Enhancement-Modell. Der Unterschied liegt in Tiefe, Build-Anforderungen und Zielkomplexität – dieser Artikel zeigt, wo die Grenzen verlaufen.

   Read more

10. 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.

    Read more