MageObsidian — Modern Frontend for Magento 2

📚 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).

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.

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

The MageObsidian stack

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

Support the project

If MageObsidian saves you time, consider buying me a coffee. ❤️