PHPackages mage-obsidian/module-modern-frontend - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. mage-obsidian/module-modern-frontend ActiveMagento2-module[Utility & Helpers](/categories/utility) mage-obsidian/module-modern-frontend ==================================== Modern frontend core for Magento 2 โ€” replaces Luma/LESS/RequireJS with Vite, Tailwind CSS 4, Vue and native ESM while keeping Magento layouts, blocks and templates. 2.15.1(1w ago)473120MITPHPCI passing Since Jun 20Pushed 1mo ago1 watchersCompare [ Source](https://github.com/mage-obsidian/module-modern-frontend)[ Packagist](https://packagist.org/packages/mage-obsidian/module-modern-frontend)[ Docs](https://mage-obsidian.jeanmarcos.dev/)[ Fund](https://ko-fi.com/Q5Q816Z9WN)[ RSS](/packages/mage-obsidian-module-modern-frontend/feed)WikiDiscussions master Synced 1w ago READMEChangelog (9)Dependencies (17)Versions (32)Used By (20) [![MageObsidian storefront โ€” a modern frontend for Magento](https://raw.githubusercontent.com/mage-obsidian/.github/main/profile/assets/storefront-home.png)](https://raw.githubusercontent.com/mage-obsidian/.github/main/profile/assets/storefront-home.png) MageObsidian โ€” Modern Frontend for Magento 2 ============================================ [](#mageobsidian--modern-frontend-for-magento-2) [![Latest Version](https://camo.githubusercontent.com/7f2aa9c05507c176dffa68ab3edad1b7b7e75bd822faca8ebe61cfa70c35588b/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d6167652d6f6273696469616e2f6d6f64756c652d6d6f6465726e2d66726f6e74656e642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mage-obsidian/module-modern-frontend) [![CI](https://github.com/mage-obsidian/module-modern-frontend/actions/workflows/ci.yml/badge.svg)](https://github.com/mage-obsidian/module-modern-frontend/actions/workflows/ci.yml) [![License](https://camo.githubusercontent.com/b123aa495770c86d42041f2a5b0f0b916576d9e5fdf873d288b6316b91592b11/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f6d6167652d6f6273696469616e2f6d6f64756c652d6d6f6465726e2d66726f6e74656e642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/mage-obsidian/module-modern-frontend) [๐Ÿ“š Documentation](https://mage-obsidian.jeanmarcos.dev/) ยท [๐Ÿš€ Live demo (Lighthouse 100)](https://mage-obsidian-demo.jeanmarcos.dev/) ยท [๐Ÿ’ฌ Discussions](https://github.com/mage-obsidian/module-modern-frontend/discussions) **MageObsidian** replaces Magento 2's legacy frontend stack (LESS, RequireJS, jQuery) with **Vite, Tailwind CSS 4, Vue 3 islands and native ESM** โ€” while keeping Magento's Layouts, Blocks, Templates, theme inheritance and module system working exactly as you know them. No headless rewrite, no parallel stack. This is the **core module**: it detects compatible modules/themes, generates the config contract consumed by the JS build engine, integrates with `setup:static-content:deploy`, and provides the ViewModels templates use to reach Vite output (including `renderVueComponent()` for Vue islands and JSON-LD emission). Installation ------------ [](#installation) ``` composer require mage-obsidian/component-modern-frontend # pulls in this module pnpm --prefix vite install bin/magento setup:upgrade bin/magento mage-obsidian:frontend:config --generate ``` Full guide: [Getting started](https://mage-obsidian.jeanmarcos.dev/getting-started/installation/). Highlights ---------- [](#highlights) - โšก **Vite dev server with HMR** inside Magento - ๐ŸŽจ **Tailwind CSS 4** with per-theme extension and inheritance - ๐Ÿ๏ธ **Vue 3 islands** mounted lazily over server-rendered pages - ๐Ÿงฉ **JS interceptors** โ€” Magento-style `before`/`around`/`after` plugins for JavaScript - ๐ŸŒฟ Optional [Twig engine](https://github.com/mage-obsidian/module-modern-frontend-twig) The MageObsidian stack ---------------------- [](#the-mageobsidian-stack) PackageRole**module-modern-frontend** (this repo)Core module: compatibility detection, config contract, deploy integration, ViewModels[component-modern-frontend](https://github.com/mage-obsidian/component-modern-frontend)Vite build harness mapped into the Magento root[js-package-utils](https://github.com/mage-obsidian/js-package-utils)JS build engine (npm: [`mage-obsidian`](https://www.npmjs.com/package/mage-obsidian))[module-modern-frontend-cli](https://github.com/mage-obsidian/module-modern-frontend-cli)`bin/magento` CLI commands[module-storefront](https://github.com/mage-obsidian/module-storefront) + `module-*`Luma-parity storefront and domain compatibility modulesSupport the project ------------------- [](#support-the-project) If MageObsidian saves you time, consider [buying me a coffee](https://ko-fi.com/Q5Q816Z9WN). โค๏ธ ### Health Score 46 โ€” FairBetter than 92% of packages Maintenance95 Actively maintained with recent releases Popularity17 Limited adoption so far Community21 Small or concentrated contributor base Maturity45 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits โ€” single point of failure How is this calculated?**Maintenance (25%)** โ€” Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** โ€” Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** โ€” Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** โ€” Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~20 days Recently: every ~2 days Total 31 Last Release 12d ago Major Versions 1.0.6-alpha โ†’ 2.0.02026-06-20 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/26399111?v=4)[Jeanmarcos](/maintainers/jeanmarcos-dev)[@jeanmarcos-dev](https://github.com/jeanmarcos-dev) --- Top Contributors [![jeanmarcos-dev](https://avatars.githubusercontent.com/u/26399111?v=4)](https://github.com/jeanmarcos-dev "jeanmarcos-dev (66 commits)") --- Tags ecommerceesmfrontendhmrmagentomagento2magento2-moduletailwindcssvitevuejsmagentovitethemefrontendvuemagento2tailwindcss ### Embed Badge ![Health badge](/badges/mage-obsidian-module-modern-frontend/health.svg) ``` [![Health](https://phpackages.com/badges/mage-obsidian-module-modern-frontend/health.svg)](https://phpackages.com/packages/mage-obsidian-module-modern-frontend) ``` ### Alternatives [run-as-root/magento2-prometheus-exporter Magento2 Prometheus Exporter 69362.0k](/packages/run-as-root-magento2-prometheus-exporter)[mollie/magento2 Mollie Payment Module for Magento 2 1142.0M17](/packages/mollie-magento2)[loki/magento2-components Core module for defining Alpine.js components with advanced AJAX features 1015.1k29](/packages/loki-magento2-components)[angeo/module-llms-txt Magento 2 module for AI Engine Optimization (AEO). Generates spec-compliant llms.txt and llms-full.txt per llmstxt.org standard, plus streaming JSONL for vector indexing. Multi-store, multi-website, CLI, cron, async admin UI, Page Builder-aware sanitization, customer-group pricing, atomic writes, ETag/Cache-Control, .md mirrors. 132.2k](/packages/angeo-module-llms-txt)[opengento/module-category-import-export This module add the capability to import and export the categories from the back-office. 1312.0k3](/packages/opengento-module-category-import-export) PHPackages ยฉ 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)