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.9.0 2026-07-17 17:37 UTC

Requires

• justinrainbow/json-schema: ^5.2 || ^6.0
• magento/framework: >=103.0.6
• magento/module-backend: >=102.0.6
• magento/module-catalog: >=104.0.6
• magento/module-config: >=101.2.6
• magento/module-deploy: >=100.4.6
• magento/module-store: >=101.1.6
• magento/module-theme: >=101.1.6
• magento/module-translation: >=100.4.6

MIT

• Jeanmarcos Juarez

• theme
• frontend
• magento
• magento2
• vue
• tailwindcss
• vite

Published on Packagist.org on 2026-07-17 17:39 UTC

README

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. ❤️