4. Working with Alpine.js

Versions in Hyvä

The Hyvä Default Theme uses the following Alpine.js versions in the theme:

• Alpine.js v2.x in Default Theme v1.0.x / v1.1.x
• Alpine.js v3.x in Default Theme v1.2.x / v1.3.x

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 https://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

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

Learning

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

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

AlpineJS plugins are available for IDEs and Editors, we have docs for PHPStorm and VSCode on the Editor Setup Docs which includes Intellisense to make it easier to write AlpineJS.

Tip

If you have more Learning material we could reference here feel free to share it, on our Slack or create an issue on the gitlab page for our docs.