Using AlpineJS 3 with Hugo

tips & tricks
1

AlpineJS 3 have been out for a month or two now. I have been a little too busy to look into it, but it looks fantastic on paper (see https://alpinejs.dev/), among other thing it uses Vue’s “reactive engine”.

I tested it out today, and I think the fastest way to get up and running is:

npm install alpinejs

Then in assets/js/index.js:

import Alpine from 'alpinejs';

window.Alpine = Alpine;
Alpine.start();

Then build that with ESBuild (which is also what AlpineJS is used for their packaging):

{{ $js := resources.Get "js/index.js" | js.Build }}

There are details to the above. It is possible to use a CDN built version etc., but that is a story for another day. The above allows you to just pick the components you need.

14 Likes