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-collapse

This Plugin is offered in Hyvä UI

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

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

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 example, there is an Alpine plugin for using the HTML dialog element with x-show, simply by adding x-htmldialog, similar to x-collapse.

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