Alpine.js – Minimal-JS für dynamische Websites (2025)
Wenig JavaScript, viel Wirkung: Alpine.js bringt Reactive-Patterns direkt ins Markup – ideal für Landingpages, Dokus und kleine Web-Apps. Hier zeige ich, wie ich Alpine zusammen mit Tailwind produktiv einsetze.
~8 Min. Lesezeit · Veröffentlicht am
🚀 Key Facts:
- ~10kB gzipped, keine Build-Pipeline nötig
- Direkt im HTML via
x-*-Attribute - Hervorragend mit Tailwind kombinierbar
Warum Alpine statt React/Vue?
Für kleine bis mittlere Interaktionen ist Alpine schneller integriert, leichter wartbar und vermeidet Overhead. Ideal für Navigations-Toggles, Modals, Tabs, Formular-UX, Filter, Accordions.
Quickstart
<!-- In Produktion lieber lokal hosten statt CDN -->
<script defer src="/assets/js/alpine.min.js"></script>
<div x-data="{ open:false }" class="p-4 border rounded-xl">
<button @click="open = !open" class="btn">Toggle</button>
<div x-show="open" class="mt-3">Hallo Alpine!</div>
</div>
State & Events
<div x-data="{ q:'', items:['Apple','Banane','Birne'] }">
<input x-model="q" placeholder="Suche..." class="input">
<ul>
<template x-for="it in items.filter(i => i.toLowerCase().includes(q.toLowerCase()))">
<li x-text="it"></li>
</template>
</ul>
</div>
Komponenten-Muster
<!-- Wiederverwendbare Komponente via x-data Funktion -->
<div x-data="dropdown()" class="relative">
<button @click="toggle()">Menü</button>
<ul x-show="open" @click.outside="close()" class="menu">...</ul>
</div>
<script>
function dropdown(){ return {
open:false, toggle(){this.open=!this.open}, close(){this.open=false}
} }
</script>
Progressive Enhancement
- HTML zuerst, Funktionen ohne JS degradiert nutzbar
- Formulare serverseitig absichern, Alpine nur für UX
- Für größere Apps ggf. auf Vue/React wechseln
Performance-Tipps
- Alpine lokal ausliefern, SRI/Integrität setzen
- Komponenten klar kapseln (
x-dataklein halten) - Event-Delegation nutzen, DOM minimal halten