hmc-guide/themes/hugo-mod-jslibs-dist/alpinejs

This module mounts AlpineJS's packages/.../dist folders.

See Releases for version information. We use the Semver Pair versioning scheme.

The packages folder is mounted in assets/jslibs/alpinejs/v3.

That means that you can just import it into your Hugo config:

[[module.imports]]
path = "github.com/gohugoio/hugo-mod-jslibs-dist/alpinejs/v3"

And then use it in your JS files:

import Alpine from 'jslibs/alpinejs/v3/alpinejs/dist/module.esm.js';
import intersect from 'jslibs/alpinejs/v3/intersect/dist/module.esm.js';
import persist from 'jslibs/alpinejs/v3/persist/dist/module.esm.js';

// Set up and start Alpine.
(function() {
    // Register AlpineJS plugins.
    Alpine.plugin(intersect);
    Alpine.plugin(persist);

    // Start Alpine.
    Alpine.start();
	
})();

Note that AlpineJS now requires ES target 2017 or later to work:

{{ $params := dict }}
{{ $opts := dict "sourceMap" $sourceMap "minify" (ne hugo.Environment "development") "target" "es2017" "params" $params }}
{{ $js := $js | js.Build $opts }}

Note that this works great in combination with Turbo, but you would need to set up something like these listeners to make it work properly.