Skip to content

Scaffolding

MageObsidian ships bin/magento generators that scaffold modules, themes, and Vue components already wired for the frontend — so the resolver picks them up with no manual setup. They live in the mage-obsidian/module-modern-frontend-cli package.

Command What it creates
mage-obsidian:generate:module A new module under app/code, opted in for the frontend.
mage-obsidian:generate:theme A new frontend theme under app/design, pre-wired.
mage-obsidian:generate:component A Vue single-file component inside a module or theme.

Generate a Module

1
bin/magento mage-obsidian:generate:module Acme_Catalog

The name must be in Vendor_Module form. It creates, under app/code/Acme/Catalog/:

  • registration.php
  • etc/module.xml (sequenced after the core)
  • etc/mage_obsidian_compatibility.xml (the frontend opt-in)
  • view/frontend/web/module.config.ts

A module is invisible to the frontend stack until it ships the compatibility file, so it is generated by default. Follow the printed next steps to activate it:

1
2
3
4
bin/magento module:enable Acme_Catalog
bin/magento setup:upgrade
bin/magento mage-obsidian:frontend:config --generate
bin/magento mage-obsidian:generate:component <Name> --module=Acme_Catalog
Option Description
--force, -f Overwrite files if they already exist.

Generate a Theme

1
bin/magento mage-obsidian:generate:theme Acme/aurora --parent=Magento/blank --title="Aurora"

The code must be in Vendor/theme form. It creates, under app/design/frontend/Acme/aurora/:

  • registration.php
  • theme.xml (with the <parent> if --parent is given)
  • etc/mage_obsidian_compatibility.xml
  • web/theme.config.js
  • web/css/theme.source.css (a Tailwind 4 source)
  • .gitignore
Option Description
--parent Parent theme, e.g. Magento/blank.
--title Human-readable theme title (defaults to the code).
--force, -f Overwrite existing files.

Then activate it in Content → Design → Configuration (or via config) and regenerate the contract:

1
bin/magento mage-obsidian:frontend:config --generate

Generate a Component

Target exactly one of a module or a theme:

1
2
3
4
5
# into a module
bin/magento mage-obsidian:generate:component Button --module=Acme_Catalog

# into a theme
bin/magento mage-obsidian:generate:component ProductCard --theme=Acme/aurora

The target must be an enabled, frontend-compatible module/theme; otherwise the command tells you to ship the compatibility file and run mage-obsidian:frontend:config --generate.

The component is written to the framework's convention so the resolver finds it with no registration:

  • module → view/frontend/web/components/<name>.vue
  • theme → web/components/<name>.vue

Nested paths work (elements/Button), and a leading components/ or trailing .vue in the name is normalized away. The command then prints how to render it:

1
$block->renderVueComponent('Acme_Catalog::Button');

(For a theme target the reference uses the Theme:: namespace, e.g. Theme::ProductCard.)

Option Description
--module Target module (Vendor_Module).
--theme Target theme (Vendor/theme).
--wire Also generate a .phtml stub that renders the component.
--force, -f Overwrite existing files.

Wiring a phtml stub

With --wire, the command also writes a .phtml that renders the new component and prints a layout block snippet to drop it onto a handle:

  • module → view/frontend/templates/<name>.phtml
  • theme → Magento_Theme/templates/<name>.phtml
1
2
3
4
5
<referenceContainer name="content">
    <block class="MageObsidian\ModernFrontend\Block\Template"
           name="acme.catalog.button"
           template="Acme_Catalog::button.phtml"/>
</referenceContainer>

End-to-End Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
# 1. New module, enabled and compatible
bin/magento mage-obsidian:generate:module Acme_Catalog
bin/magento module:enable Acme_Catalog
bin/magento setup:upgrade
bin/magento mage-obsidian:frontend:config --generate

# 2. A component wired with a phtml stub
bin/magento mage-obsidian:generate:component ProductCard --module=Acme_Catalog --wire

# 3. Add the printed <block> to a layout handle, then build

The component renders as a lazy-hydrated Vue island. Edit the generated .vue and the dev watcher keeps resolution and editor autocomplete in sync.