Alpine.js

AI generated

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.

AI generated

Reaktivität: Alpine.js vs. Proxy-basierte Reaktivität in Vue im Vergleich

22.07.2025

Alpine.js hängt tatsächlich direkt vom npm-Paket @vue/reactivity ab, beide Frameworks nutzen also im Kern dieselbe Proxy-Maschinerie. Trotzdem fühlt sich Reaktivität in Alpine im Alltag anders an als in Vue, mit spürbaren Konsequenzen fürs Debugging und für die Performance bei großen, verschachtelten Objekten.

AI generated

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.

AI generated

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.

AI generated

Das Morph-Plugin für flackerfreie DOM-Updates bei Livewire und Co.

19.07.2025

Alpine.morph() ersetzt ein bestehendes DOM-Fragment nicht einfach durch neues HTML, sondern gleicht beide Bäume Knoten für Knoten ab und ändert nur das, was sich tatsächlich unterscheidet. Fokus, Scroll-Position, Eingabewerte und sogar der Zustand einer laufenden Alpine-Komponente bleiben dabei erhalten, ein Grund, warum Livewire das Plugin intern für jeden Server-Roundtrip einsetzt.

AI generated

Kreditkarten-Eingabemaske mit Alpine.js richtig bauen

19.07.2025

Eine Kreditkarten-Eingabemaske ist mehr als das Einfügen von Leerzeichen alle vier Ziffern. Kartentyp-Erkennung, unterschiedliche Gruppierungslängen bei American Express, die Luhn-Prüfsumme und ein Cursor, der beim Tippen nicht ständig zurückspringt, machen aus einer simplen Formatierung ein kleines, aber anspruchsvolles Alpine.js Projekt.

AI generated

Alpine.js vs. React Hooks — Wann reicht Alpine?

06.07.2025

React Hooks haben die Komponentenentwicklung revolutioniert – aber für viele serverseitig gerenderte Projekte ist Alpine.js die bessere Wahl: weniger Build-Tooling, kein Virtual DOM, direktes HTML-Enhancement. Dieser Artikel zeigt anhand konkreter Muster, wo Alpine.js vollständig ausreicht und wo React seine Stärken ausspielt.

AI generated

Alpine.js CSP Build: Strikte Content Security Policy ohne eval()

06.07.2025

Das Standard-Build von Alpine.js wertet Expressions in x-data und x-on über new Function() aus, was unter einer strikten Content Security Policy ohne unsafe-eval sofort blockiert wird. Das dedizierte Alpine.js CSP Build ersetzt diese Auswertung durch einen sicheren Expression-Parser und macht reaktive Komponenten auch in Umgebungen mit striktester Sicherheitsrichtlinie möglich.

AI generated

Magic Properties: eigene Dollar-Eigenschaften mit Alpine.magic() definieren

03.07.2025

Hinter eingebauten Werten wie $el, $refs oder $watch steckt in Alpine dieselbe API, die auch für eigene Erweiterungen offensteht: Alpine.magic(). Wer versteht, wie eine Magic Property registriert wird und wie sie sich von einer Direktive und einem Plugin unterscheidet, kann wiederverwendbare Helfer wie $clipboard oder $debounce für das ganze Projekt bereitstellen.

AI generated

Back to Top Button mit Sichtbarkeitslogik in Alpine.js

02.07.2025

Ein Back to Top Button klingt nach einem trivialen UI Element, entpuppt sich bei genauerem Hinsehen aber als kleines Bündel von Detailentscheidungen: wann er erscheinen soll, wie er scrollt, wohin der Fokus nach dem Klick wandert, und wie er sich mit anderen fixierten Elementen wie Cookie Bannern verträgt. Alpine.js liefert dafür ein kompaktes, vollständig barrierefreies Muster.