Alpine.js

The Alpine.js way.

Installing Alpine.js

I’ve installed it using npm in the assets/js folder, then figured out which file to reference in the package. It is then referenced in the head.html template. You can add as many modules as required in the front matter property jsresources as seen above.

I’m relying on Hugo to move these file to resources when building the site.

The Counter

<div x-data="{ count: 0 }">
  <output x-text="count"></output>
  <button x-on:click="count++">Count With Alpine.js</button>
</div>

Changing CSS Class