包简介

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.

README 文档

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

mage-obsidian/module-modern-frontend 适用场景与选型建议

mage-obsidian/module-modern-frontend 是一款基于 PHP 开发的 Composer 扩展包，目前已累计 43 次下载、GitHub Stars 达 1，最近一次更新时间为 2024 年 12 月 02 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「theme」「frontend」「magento」「magento2」「vue」「tailwindcss」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 mage-obsidian/module-modern-frontend 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 mage-obsidian/module-modern-frontend 我们能提供哪些服务？

定制开发 / 二次开发

基于 mage-obsidian/module-modern-frontend 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发