Alpine.js Plugins

Alpine.js v3 offers an improved API for creating and using plugins. Hyvä includes several Alpine plugins out-of-the-box, with more available via Hyvä UI.

Plugins

x-intersect

This plugin simplifies viewport intersection observation, allowing you to trigger actions when elements enter or exit the view. It's included by default in the Hyvä Theme Module (v1.10.0+).

For more information, see the x-intersect docs.

x-ignore

This directive excludes specific HTML parts from Alpine's processing. While normally part of Alpine v3.0.0, Hyvä Theme Module (v3.7.0+) provides it as a plugin for Alpine v2 support.

For more information, see the x-ignore docs.

x-defer

This custom Hyvä Alpine plugin postpones the initialization of Alpine components, improving initial page load performance by deferring non-critical JavaScript execution.

For more information, see the x-defer docs.

x-snap-slider

This custom Hyvä Alpine plugin enables building CSS-driven sliders with enhanced JavaScript functionality, creating lightweight sliders progressively enhanced by JS.

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

x-htmldialog

Used with x-show, this plugin enables the native HTML dialog element, simplifying the creation of modals and offcanvas elements.

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

x-collapse

Used with x-show, this Alpine plugin provides smooth animations for expanding and collapsing elements.

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

Official Plugins

Beyond the plugins provided by Hyvä, you can integrate other official Alpine.js plugins. Add their JavaScript code as an inline script within a PHTML file, then include it on the necessary pages using layout XML. Ensure the plugin is registered by subscribing to the alpine:init event:

<script>
    (() => {
        function src_default(Alpine) {
            Alpine.directive(...);
        }

        document.addEventListener('alpine:init', () => {
            window.Alpine.plugin(src_default);
        });
    })();
</script>
<?php $hyvaCsp->registerInlineScript() ?>

Refer to view/base/templatespage/js/plugins/v3/ in the Hyva_Theme module for examples.

Third-Party Plugins

Many third-party plugins are available to further enhance your Alpine.js experience.

Explore available options on the GitHub alpinejs-plugins tag page.