Nesting Components

Laravel Livewire Documentation Reference

Since Magewire is heavily inspired by Laravel Livewire, many concepts are either identical or very similar. To avoid duplicating documentation, this page only covers Magewire-specific and platform-specific details. For all general concepts and in-depth explanations, you can refer to the corresponding Laravel Livewire documentation.

Livewire Reference

Layout XML

Nest Magewire children under a parent block in layout XML:

view/frontend/layout/catalog_product_view.xml

<referenceBlock name="content">
    <block name="product.toolbar"
           template="Vendor_Module::magewire/product/toolbar.phtml">
        <arguments>
            <argument name="magewire" xsi:type="object">
                Vendor\Module\Magewire\Product\Toolbar
            </argument>
        </arguments>

        <block name="product.toolbar.cart-button"
               as="cart-button"
               template="Vendor_Module::magewire/product/cart-button.phtml">
            <arguments>
                <argument name="magewire" xsi:type="object">
                    Vendor\Module\Magewire\Product\CartButton
                </argument>
            </arguments>
        </block>
    </block>
</referenceBlock>

Rendering children

Use $block->getChildHtml('alias') from the parent template. Each child emits its own <wire:snapshot>.

templates/magewire/product/toolbar.phtml

<div>
    <h1><?= $escaper->escapeHtml($magewire->productName) ?></h1>
    <?= $block->getChildHtml('cart-button') ?>
</div>

Keyed children in loops

<?php foreach ($magewire->lines as $line): ?>
    <?= $block->getChildHtml('line-' . $line['id']) ?>
<?php endforeach; ?>

For dynamically-created child blocks, generate them in mount() or a hook with unique name / as aliases.

Flakes

A child without full component isolation belongs as a Flake.