Component Slots in Livewire v4: Blade-Style Flexibility

Use Blade-style slots in Livewire components for composable UIs.

Livewire v4 brings Blade-style slot support to components.

Default Slots

blade

<wire:modal>Create Post</wire:modal>

blade

<wire:modal>
    <wire:slot name="header">
        <h1>Create Post</h1>
    </wire:slot>
    <form>...</form>
</wire:modal>

blade

@if ($header = $slot('header'))
    {{ $header }}
@endif
{{ $slot }}

Use Blade-style slots in Livewire components for composable UIs.

Livewire v4 brings Blade-style slot support to components.

blade

<wire:modal>Create Post</wire:modal>

blade

<wire:modal>
    <wire:slot name="header">
        <h1>Create Post</h1>
    </wire:slot>
    <form>...</form>
</wire:modal>

blade

@if ($header = $slot('header'))
    {{ $header }}
@endif
{{ $slot }}