{"id":23947,"date":"2025-11-03T11:00:00","date_gmt":"2025-11-03T05:30:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=23947"},"modified":"2025-11-06T10:16:56","modified_gmt":"2025-11-06T04:46:56","slug":"magento-2-luma-to-hyva-technical-differences","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/magento-2-luma-to-hyva-technical-differences\/","title":{"rendered":"Magento 2 Luma to Hyv\u00e4 &#8211; Technical Differences"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The <a href=\"https:\/\/meetanshi.com\/blog\/what-is-the-hyva-theme\/\">Hyv\u00e4 theme<\/a> has swiftly become an alternative for the traditional Luma theme for Magento 2 stores.\u00a0<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">While the Luma theme is considered heavy, complex, and difficult to maintain. Hyv\u00e4 is a simple and a developer-friendly solution.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This blog addresses the technical differences of switching from Luma to the Hyv\u00e4 theme for your Magento 2 store.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Technical Differences: Magento 2 Luma to Hyv\u00e4<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">1. Removes Dependency on RequireJS&nbsp;<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Luma relies heavily on RequireJS for module loading and dependency management. The scripts are initialized using:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>data-mage-init<br><\/li>\n\n\n\n<li>x-magento-init<br><\/li>\n\n\n\n<li>and direct require() calls.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 eliminates the RequireJS completely.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Instead, it uses Alpine.js and vanilla JavaScript, making the frontend faster and easier to debug.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Scripts are modular, inline, and scoped directly in templates or components \u2014 no extra JS bundling or async complexity.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">2. Inlining and Initializing Scripts<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Luma\u2019s inline script initialization often follows this pattern:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;script type=\"text\/x-magento-init\">\n\n{\n\n\u00a0\u00a0\"*\": {\n\n\u00a0\u00a0\u00a0\u00a0\"Magento_Ui\/js\/core\/app\": {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"components\": {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"exampleComponent\": {\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\"component\": \"Vendor_Module\/js\/example\"\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0\u00a0\u00a0}\n\n\u00a0\u00a0}\n\n}\n\n&lt;\/script>\n\nHyv\u00e4 replaces this with simple, inline Alpine.js directives, such as:\n\n&lt;div x-data=\"{ open: false }\">\n\n\u00a0\u00a0&lt;button @click=\"open = !open\">Toggle&lt;\/button>\n\n\u00a0\u00a0&lt;div x-show=\"open\">Hello Hyv\u00e4!&lt;\/div>\n\n&lt;\/div><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This drastically reduces complexity \u2014 no need for JSON-based initialization or RequireJS calls.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">3. From mage\/template to x-magento-template<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Luma uses mage\/template and Underscore.js for rendering templates dynamically:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var tmpl = mageTemplate('#template-id');\n\ntmpl({ data: value });<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 abandons this pattern and leverages Alpine.js reactivity with inline bindings, making the DOM manipulation process more direct, readable, and maintainable.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">4. Handling Data Attributes<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Luma often reads and writes data using jQuery\u2019s data() method:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">var value = $(element).data('key');\n\n$(element).data('key', 'newValue');<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 continues to use HTML5\u2019s native data-* attributes, but interacts with them using modern JavaScript rather than jQuery. This shift makes scripts lighter and independent from the jQuery library.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">5. Replacing Underscore and jQuery Utility Functions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Many functions depend on Underscore and jQuery utilities in Luma, such as:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">_.isObject(x)\n\n$.each(array, function(index, value) { ... });<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 removes both libraries completely. Instead, developers use native JavaScript methods like:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">typeof x === 'object'\n\narray.forEach((value, index) => { ... });<\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This helps reduce page size and improves performance while maintaining readability.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">6. Rendering Arrays with Alpine.js<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Instead of using Magento UI components or Underscore templates to loop through data, Hyv\u00e4 uses x-for in Alpine.js:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;ul>\n\n\u00a0\u00a0&lt;template x-for=\"item in items\" :key=\"item.id\">\n\n\u00a0\u00a0\u00a0\u00a0&lt;li x-text=\"item.name\">&lt;\/li>\n\n\u00a0\u00a0&lt;\/template>\n\n&lt;\/ul><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This syntax is simple, reactive, and works without additional JavaScript dependencies.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">7. Converting Luma CSS to Tailwind<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Luma\u2019s styling is based on LESS and a complex system of mixins and variables.&nbsp;<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Yes &#8211; It is powerful but bloated.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 uses Tailwind CSS, a utility-first framework. Developers can quickly style elements using predefined classes:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">&lt;button class=\"bg-blue-600 text-white px-4 py-2 rounded\">Submit&lt;\/button><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">This makes styling consistent, scalable, and easier to maintain, while reducing CSS size dramatically. Overall, migrating from Luma to Hyv\u00e4 is more than a design upgrade \u2014 it\u2019s a complete frontend transformation.<\/p>\n\n\n<div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span> Hyv\u00e4 Development Service<\/span>\r\n<p>Get a fast-loading store in less than 7 weeks with Hyv\u00e4 theme<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\" target=\"_blank\" class=\"btn-primary\">Hire Us<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\" alt=\"Hyva Theme Development Service\">\r\n<\/div>\r\n<\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Hyv\u00e4 theme has swiftly become an alternative for the traditional Luma theme for Magento 2 stores.\u00a0 While the Luma theme is considered heavy, complex,&#8230;<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5869],"tags":[],"class_list":["post-23947","post","type-post","status-publish","format-standard","hentry","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23947","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=23947"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23947\/revisions"}],"predecessor-version":[{"id":24036,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/23947\/revisions\/24036"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=23947"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=23947"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=23947"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}