Tag: Alpine.js

1. Daten visualisieren mit Alpine.js ohne Chart.js

   10.09.2025

   Chart.js bringt 200 KB in euer JavaScript-Bundle. D3.js ist eine eigene Lernkurve. Für die meisten Dashboard-Widgets in Hyvä-Themes reichen Alpine.js und natives SVG – mit Tooltips, Animationen und vollständiger Barrierefreiheit.

   Read more

2. Warnung bei ungespeicherten Änderungen mit Alpine.js

   05.09.2025

   Ein Nutzer, der zwanzig Minuten in ein Formular investiert hat und dann versehentlich den Tab schließt, verliert seine Arbeit komplett, wenn keine Warnung bei ungespeicherten Änderungen greift. Mit Dirty-State-Tracking, dem beforeunload-Event und einem eigenen Bestätigungsdialog für interne Navigation lässt sich dieser Datenverlust in Alpine.js zuverlässig verhindern.

   Read more

3. Accessibility-konformes Modal mit Alpine.js: Fokus-Trap und ARIA

   30.08.2025

   Ein visuell ansprechendes Modal ist nur die halbe Arbeit. Wer Barrierefreiheit nach WCAG 2.1 ernst nimmt, muss Fokus-Management, korrekte ARIA-Rollen und vollständige Keyboard-Navigation implementieren. Alpine.js macht das möglich – ohne jQuery, ohne externe Bibliotheken.

   Read more

4. Event Modifier prevent, stop und once im Detail | Alpine.js

   16.08.2025

   Wer Alpine.js Event Modifier wie prevent, stop, once und self kennt, schreibt schlankere Templates ohne preventDefault-Aufrufe im JavaScript. Dieser Artikel erklärt jeden Event Modifier im Detail, zeigt die Verkettung mehrerer Modifier und deckt Fälle auf, in denen die native Event-API trotzdem gebraucht wird.

   Read more

5. Testimonial Slider ohne externe Bibliothek mit Alpine.js

   13.08.2025

   Ein Testimonial Slider zeigt Kundenstimmen in kompakter, rotierender Form und ist damit ein zentrales Social-Proof-Element auf Produkt- und Landingpages. Mit Alpine.js entsteht ein Testimonial Slider mit Autoplay, Touch-Swipe, Tastaturbedienung und Bullet-Indikatoren in wenigen Zeilen Code, komplett ohne Swiper, Slick oder andere externe Slider-Bibliothek.

   Read more

6. Alpine.js Performance: Große Datenlisten optimieren

   10.08.2025

   Hunderte oder tausende Einträge in einem Alpine.js x-for-Loop rendern – das geht, aber ohne gezielte Optimierungen werden Filtereingaben träge, Scrolling ruckelt und der Browser-Tab friert ein. Mit den richtigen Mustern bleibt Alpine.js auch bei großen Datensätzen schnell und reaktiv.

   Read more

7. x-cloak richtig einsetzen: FOUC in Alpine.js zuverlässig vermeiden

   03.08.2025

   Wer Alpine.js ohne x-cloak einsetzt, riskiert ein kurzes Aufblitzen ungestylter Direktiven beim Seitenaufbau. x-cloak schließt genau diese Lücke zwischen HTML-Parsing und Alpine-Initialisierung mit einer einzigen CSS-Regel und einem Attribut, das zuverlässig verschwindet, sobald die Komponente bereit ist.

   Read more

8. Breadcrumb dynamisch aus der Route generieren mit Alpine.js

   27.07.2025

   Eine Breadcrumb Navigation zeigt Nutzern, wo sie sich innerhalb der Seitenstruktur befinden, und liefert Suchmaschinen ein klares BreadcrumbList Signal. Mit Alpine.js lässt sich diese Navigation direkt aus der aktuellen URL erzeugen, ganz ohne clientseitigen Router und ohne die Pfadsegmente manuell für jede Seite zu pflegen.

   Read more

9. Alpine.js Sticky Table Header: Scroll-Aware Tabellen

   22.07.2025

   Lange Vergleichstabellen ohne fixierten Header kosten Nutzer Zeit und Orientierung. Mit position: sticky, Alpine.js x-data und IntersectionObserver entsteht ein vollständig scroll-aware Tabellenkopf – mit Shadow-Indikator, optionaler Spalten-Markierung und responsiver Fallback-Strategie, ohne jQuery-Plugin und ohne JavaScript-basierte Position-Berechnung.

   Read more

10. Alpine.js x-collapse: Smooth Akkordeon-Animation ohne CSS-Hack

    20.07.2025

    Der max-height-Trick funktioniert, sieht aber nie wirklich flüssig aus. Alpine.js x-collapse animiert die tatsächliche Inhaltshöhe, reagiert auf dynamische Inhalte und integriert sich nahtlos in Alpine-State – ohne eine einzige Zeile eigenes JavaScript.

    Read more