How to use Blade section directive in Livewire Volt

When creating full page components in Livewire, you typically return view that extends given layout and injects content in specific section:

return view('livewire.welcome')
    ->extends('layouts.landing')
    ->section('content');

But how to inject your content into specific section using Volt? Official Livewire Volt documentation does not include instruction how to use Blade section directive in Volt.

# Blade section directive usage in Livewire Volt

If you want to inject specific content in given section in Laravel Blade using Volt you need to use @section directive directly in your Livewire Volt component:

<?php

use Illuminate\Http\Request;
use function Livewire\Volt\{layout};

layout('layouts.application');

?>


<div>
    @section('content')
        <!-- Your content goes here -->
    @endsection
</div>

# Multiple Blade section directives in Livewire Volt

This also works if you have many @yield directives in your layout:

<?php

use Illuminate\Http\Request;
use function Livewire\Volt\{layout};

layout('layouts.application');

?>


<div>
    @section('header', 'Dashboard')

    @section('content')
        <!-- Your content goes here -->
    @endsection
</div>

This also works with other Laravel Blade directives, like:

• @push
• @pushOnce

# Could not find Livewire component in DOM tree

When using a full-page Volt component combined with Laravel Blade’s @section directive, you might not be able to use $wire in your Alpine.js or JavaScript. This happens because Livewire cannot locate the current component when your HTML is injected into the view using the @section directive.

I have reported this issue on Volt's GitHub related to this.

# Workaround

As a workaround, you can create a separate Blade view that contains your Volt component.

Volt component resources/views/livewire/email.blade.php

<?php

use function Livewire\Volt\{layout, state};

layout('layouts.bare');
state('email', '[email protected]');

?>

<div>
    @section('body')
    <p x-data="{
        email: $wire.$get('email')
    }">Your email is: <span x-text="email"></span></p>
    @endsection
</div>

Routing routes/web.php

Route::view('email', 'email');

View resources/views/email.blade.php

@extends('layouts.bare')

@section('body')
    <livewire:email />
@endsection

With this approach, you can successfully use $wire while using Laravel Blade’s @section directive and Livewire Volt! 🚀