📚 Documentation · 🚀 Live demo (Lighthouse 100) · 💬 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).
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 --generateFull guide: Getting started.
- ⚡ 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/afterplugins for JavaScript - 🌿 Optional Twig engine
| Package | Role |
|---|---|
| module-modern-frontend (this repo) | Core module: compatibility detection, config contract, deploy integration, ViewModels |
| component-modern-frontend | Vite build harness mapped into the Magento root |
| js-package-utils | JS build engine (npm: mage-obsidian) |
| module-modern-frontend-cli | bin/magento CLI commands |
module-storefront + module-* |
Luma-parity storefront and domain compatibility modules |
If MageObsidian saves you time, consider buying me a coffee. ❤️
