Hyvä How To

Alpine and Hyvä for Magento

Alpine takes an evening to learn, yet building a working storefront block with it is still hard. The docs show counters and toggles, while real pages bring full page cache, foreign re-renders and a dozen directives in one component.

This reference closes the gap between “I got the syntax” and “I can build it” .

Is this for me?

Three ways in, based on what you already know

Coming from Luma You know x-magento-init, observable and uiRegistry, but not what replaced them Backend on Magento You write PHP but have to touch the front end. You need to understand, not memorise Starting from scratch First time with Alpine. Every term is explained where it first appears

Reference

when you need to recall the syntax

Directives Twenty three directives with live demos and a breakdown of modifiers Magic properties Ready made values and functions available in any expression HTML tags Browser tags with built in behaviour, no code needed More

How it works

when you need to know why it behaves this way

What Hyvä is Compared with Luma and Vue, what you gain and what you lose Reading the code At sign, colon, dot, and where methods come from Loading JavaScript How a file reaches the page and in what order How elements talk Four ways to connect components and when to use each Glossary Terms used across the catalogue More

In practice

when you are already writing and want to avoid the traps

Doing it right Rules from Alpine, Hyvä and hard won experience Debugging Console tricks, component tree, event listener Devtools The browser extension and what it gives you What is missing Gaps compared with Luma and how to close them More

x-magento-init → x-data

The syntax changed, the tasks did not.

All directives →

Alpine 3

Hyvä 1.3

Magento 2.4

If you did not find it here alpinejs.dev docs.hyva.io github.com/hyva-themes developer.mozilla.org