Alpine.js Grundlagen im Hyvä-Kontext: x-data, x-show, x-on, x-model
Alpine.js Grundlagen im Hyvä-Kontext: x-data, x-show, x-on, x-model
~8 Min. Lesezeit Zuletzt aktualisiert am 9. August 2026
Alpine.js ist das einzige JavaScript-Framework, das in einem Hyvä-Theme zum Einsatz kommt - und es ist bewusst winzig (deutlich unter 10 KB gzipped). Statt eines eigenen Build-Schritts für Komponenten reicht ein paar HTML-Attribute, um ein Element interaktiv zu machen.
x-data: der Ausgangspunkt jeder Komponente
x-data markiert ein Element als Alpine-Komponente und definiert deren anfänglichen Zustand als JavaScript-Objekt. Alles innerhalb dieses Elements (und seiner Kind-Elemente) hat Zugriff auf diesen Zustand.
<div x-data="{ open: false }">
<button x-on:click="open = !open">Menü</button>
<div x-show="open">Menü-Inhalt</div>
</div>x-show: Elemente ein- und ausblenden
x-show blendet ein Element ein oder aus, basierend auf einem Ausdruck, der zu wahr oder falsch auswertet - technisch über CSS display: none, das Element bleibt also im DOM erhalten, nur unsichtbar. Das unterscheidet es von x-if, das das Element tatsächlich aus dem DOM entfernt (relevant, wenn im Element z. B. teure Inhalte oder Formulare mit eigenem Zustand liegen).
x-on: auf Events reagieren
x-on:click (kurz auch @click geschrieben) reagiert auf DOM-Events. Praktisch jedes native Browser-Event funktioniert: click, submit, keydown, mouseenter und viele mehr.
<button @click="activeCategory = 'entwicklung'">Entwicklung</button>
<!-- Kurzschreibweise @ statt x-on: -->
<form @submit.prevent="submitted = true">...</form>Der Modifikator .prevent ruft intern event.preventDefault() auf - praktisch bei Formularen, die per Alpine statt per klassischem Seiten-Reload verarbeitet werden sollen.
x-model: Zwei-Wege-Datenbindung für Formularfelder
x-model verbindet ein Formularfeld direkt mit einer Zustandsvariable - Änderungen im Feld aktualisieren automatisch den Zustand, und umgekehrt aktualisiert eine Änderung des Zustands automatisch das Feld.
<div x-data="{ search: '' }">
<input type="text" x-model="search" placeholder="Suchen...">
<p x-show="search.length > 0">Suche nach: <span x-text="search"></span></p>
</div>x-text setzt den Textinhalt eines Elements aus einem Ausdruck (ähnlich x-show, aber für Text statt Sichtbarkeit). Für HTML-Inhalt gäbe es x-html - das sollte aber, genau wie ungeschütztes PHP-Escaping, mit Vorsicht verwendet werden, weil es rohes HTML einfügt.
Tipp: Diese vier Attribute - x-data, x-show, x-on/@, x-model - decken bereits einen großen Teil der Alpine-Interaktionen ab, die in einem typischen Hyvä-Theme vorkommen: Menüs öffnen/schließen, Formulareingaben, einfache Filter. Kapitel 15 zeigt, wie diese Attribute in echten, bestehenden Hyvä-Komponenten zusammenspielen.
Warum kein separates JS-Bundle nötig ist
Alpine wird als Teil des Hyvä-Themes bereits eingebunden - es muss nicht selbst installiert oder gebündelt werden. Eigene Komponentenlogik lebt meist direkt im x-data-Attribut oder in einem kleinen Inline-<script>-Block (mit CSP-Registrierung, siehe Kapitel 9) - für die meisten Storefront-Interaktionen reicht das völlig aus, ohne eine eigene .js-Datei anzulegen.