Alpine.js

1. Alpine.js x-mask: Input-Formatierung für Telefon, IBAN und Datum

   24.02.2026

   Eingabefelder, die sich automatisch formatieren, wirken professioneller und reduzieren Benutzerfehler. x-mask erledigt genau das – live, ohne Bibliothek, direkt in Alpine.js. Dieser Artikel erklärt statische und dynamische Masken, Zeichenklassen und Integration in Hyvä-Formulare.

   Read more

2. Alpine.js in Hyvä Theme: Interaktive Magento 2 Komponenten erklärt | Mironsoft Blog

   23.02.2026

   Read more

3. Luma-UI-Components durch Hyvä-Templates ablösen

   20.02.2026

   Wer von Luma auf Hyvä migriert, stößt unweigerlich auf Knockout-basierte UI-Components: jsLayout-XML, ko-Templates und RequireJS-Module, die Magento seit Jahren für dynamische Storefront-Widgets nutzt. Dieser Guide zeigt, wie man bestehende UI-Components liest, ihre Logik versteht und sie systematisch durch native Hyvä-Templates mit Alpine.js ersetzt - inklusive Praxisbeispielen, Drittanbieter-Strategie und einer Rollout-Checkliste für große Shops.

   Read more

4. Alpine.js Internals: Wie Reaktivität ohne Virtual DOM funktioniert

   15.02.2026

   Alpine.js braucht keinen Virtual DOM, keinen Compiler und keinen Build-Step, um reaktive Komponenten zu erzeugen. Stattdessen nutzt es JavaScript-Proxies, reaktive Effekte und MutationObserver – ein Modell, das überraschend elegant und direkt verständlich ist, sobald man es einmal durchschaut.

   Read more

5. Alpine.js x-teleport: Elemente aus dem DOM-Baum verschieben

   14.02.2026

   x-teleport löst eines der härtesten DOM-Probleme in komponentenbasierten Frontends: Elemente wie Modals, Toasts und Dropdown-Menus müssen außerhalb ihres DOM-Elternelements gerendert werden, behalten aber ihren Alpine.js-Kontext vollständig. Das Portal-Muster, bekannt aus React und Vue, ist jetzt mit einem einzigen HTML-Attribut nutzbar.

   Read more

6. Dynamische Klassen mit x-bind:class: Objektsyntax vs. Array-Syntax

   13.02.2026

   x-bind:class akzeptiert in Alpine.js mehrere Schreibweisen: eine kurze Ternary-Zeichenkette, ein Array aus Bedingungen oder ein Objekt aus Klassennamen und Booleans. Alle drei erzeugen am Ende dasselbe Ergebnis im DOM, unterscheiden sich aber deutlich in Lesbarkeit, Wartbarkeit und in der Frage, wie leicht sich neue Bedingungen später ergänzen lassen, ohne dass ein Fehler bei der Reaktivität schleichend hineinrutscht.

   Read more

7. Custom Events als Komponenten-Bus nutzen | Alpine.js

   10.02.2026

   Custom Events sind der leichtgewichtige Weg, unabhängige Alpine.js-Komponenten miteinander kommunizieren zu lassen, ohne einen zentralen Store aufzusetzen. Mit $dispatch und passenden Event-Listenern entsteht ein Komponenten-Bus, bei dem Sender und Empfänger nichts voneinander wissen müssen, solange beide denselben Event-Namen und dieselbe Payload-Struktur verwenden.

   Read more

8. Alpine.js Formularvalidierung ohne jQuery Validate

   10.02.2026

   jQuery Validate ist in Hyvä Themes nicht verfügbar – und das ist gut so. Ein eigenes Alpine.js-Validierungssystem ist reaktiver, leichter und vollständig ins State-Modell integriert. Benutzerdefinierte Regeln, asynchrone Serverprüfungen und Submit-Schutz entstehen aus weniger als 60 Zeilen Code.

   Read more

9. Alpine.js x-model Modifier: .lazy, .debounce, .number erklärt

   04.02.2026

   x-model synchronisiert Eingabefelder mit Alpine-Daten – aber standardmäßig bei jedem Tastendruck. Mit .lazy, .debounce und .number wird aus einem einfachen Two-Way-Binding ein präzises Werkzeug für API-Calls, Zahleneingaben und performance-optimierte Formulare.

   Read more

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