Alpine.js Plugins

With Alpine v3, many plugins are provided out of the box, and it is very common to write custom plugins.

The API has improved significantly over version 2, and with Hyvä, we provide two plugins out of the box.

Tip

If you're looking to create your own Alpine Plugin for Hyvä, you should also check out the compatibility docs on the differences between Alpine v2 vs v3.

Plugins

x-intersect

Alpine's Intersect plugin simplifies viewport intersection observation, providing an easy way to trigger actions when elements come into view.

We provide this plugin by default in the Hyvä Theme Module starting from version 1.10.0.

For more information, see the x-intersect docs.

x-ignore

Alpine's ignore directive allows you to exclude specific parts of your HTML from Alpine's processing.

We provide Alpine v2 support in the Hyvä Theme Module starting from version 3.7.0 as a plugin.
This directive is normally part of Alpine v3.0.0.

For more information, see the x-ignore docs.

x-defer

The x-defer directive, a custom Hyvä Alpine plugin, allows you to postpone the initialization of Alpine components.

This optimization technique can improve initial page load performance by deferring the execution of non-critical JavaScript code.

For more information, see the x-defer docs.

x-snap-slider

The x-snap-slider directive, a custom Hyvä Alpine plugin, allows you to build CSS-driven sliders with enhanced JavaScript functionality.

This enables you to create lightweight sliders powered by CSS, with JavaScript progressively enhancing the user experience.

For more information, see the x-snap-slider docs.

x-collapse

This Plugin is offered in Hyvä UI

Alpine's Collapse plugin, used with the x-show directive, provides smooth animations for expanding and collapsing elements.

For more information, see the x-collapse docs on alpine.js.

x-htmldialog

This Plugin is offered in Hyvä UI

Alpine's Htmldialog plugin, used with the x-show directive, enables the use of the native HTML dialog element. Allowing you to build Modals and Offcanvas elements with ease.

For more information, see the x-htmldialog docs on fylgja.dev.

Official Plugins

Alpine provides more plugins that you can add yourself.

You should add these plugins in the same way we have done with our own implementations, by adding the plugin JavaScript code as an inline script in a PHTML file.

Third-Party Plugins

In addition to this, there are also many third-party plugins that enhance your Alpine experience.

For all available options, see this GitHub tag page on alpinejs-plugins.