Skip to content

4. Working with Alpine.js

Hyvä 1.2.x uses Alpine.js v3

The Hyvä theme 1.1.x uses Alpine.js version 2.
The Hyvä theme 1.2.x uses Alpine.js version 3.

It is possible to use both v2 and v3 based Hyvä themes for different store views, but it is not possible to use v2 and v3 within one theme.

Alpine.js documentation

The main Alpine documentation site alpinejs.dev was launched with the release of Alpine V3 features and therefore only contains documentation on version 3. To visit the V2 docs please refer to the documentation on GitHub: https://github.com/alpinejs/alpine/tree/v2.8.2#readme

Resources

The best introduction we know is the readme linked above.
However, since tastes are different, here are some other resources to get started with Alpine.js:

General

https://github.com/alpine-collective/awesome - A list of Alpine resources
https://alpinejs.codewithhugo.com/newsletter/ - A weekly Alpine focused newsletter

Learning

https://laracasts.com/series/alpine-essentials/ - Some videos which are a great introduction to Alpine
https://laracasts.com/series/building-alpinejs - Video series which goes under the hood to explain how Alpine works
https://www.alpinetoolbox.com/ - Resources and Examples for Alpine.js

Debugging

Alpine Debugger for Chrome - https://chrome.google.com/webstore/detail/alpinejs-devtools/fopaemeedckajflibkpifppcankfmbhk Alpine Debugger for Firefox - https://addons.mozilla.org/en-US/firefox/addon/alpinejs-devtools/?src=recommended

Tip

Alpine.js plugins are available for all IDEs and Editors.