Page 15 - Alpine.js

As soon as an application needs to show more than one modal at a time, for example a confirmation dialog above an already open detail modal, a simple boolean flag stops being enough. This article shows how a global Alpine store manages a real stack of open dialogs, which z-index and focus rules apply per level, and how focus correctly returns to the triggering element when the top modal closes.

Alpine.directive() lets you build a completely new x-directive such as x-tooltip or x-clickaway, with full access to the DOM element, the expression written in the HTML, and a reactivity toolkit that plugs cleanly into Alpine's own lifecycle.

A copy button that only copies text is only half finished. Visual feedback, screen reader announcements, browser fallback, and a timeout reset all fit into a single Alpine.js state object with 10 lines of logic.

Hyva established Alpine.js as the primary JavaScript tool in the Magento frontend. Anyone who uses Alpine.js without clear patterns ends up with components that are hard to test, hard to maintain and a risk to performance. This article covers the most important proven patterns and the most common mistakes when using Alpine.js in Hyva themes.

A scroll progress bar shows readers of a long article at a glance how much content still follows and how far they have already come. With Alpine.js, this progress indicator can be built in a few lines, bound performantly to the scroll event, and shown either as a horizontal bar at the top or vertically on the page edge.

Alpine.js hydration mismatches happen when the state of an x-data object on first render does not match what the server already delivered as HTML. Unlike React or Vue, there is no virtual DOM reconciliation that logs the difference automatically. Instead, the bug shows up as visible flashing, wrong form values, or content that briefly appears and then vanishes again.

Scrolling tables horizontally on mobile isn't a solution, it's resignation. Getting Tailwind CSS responsive tables right means a card layout on the smartphone, a full table on the desktop, with sticky columns, sortable headers and collapsible rows for detail views.

Tabs that show the same panel again after a reload, support the browser's back button and can be shared as a deep link by email are not SPA features. They are URL hygiene, achieved with ten lines of Alpine.js and the browser's native History API.