livewire/volt
View on GitHubCould not find Livewire component in DOM tree when using Volt full-page
Open
#130 opened on Jan 30, 2025
help wanted
Repository metrics
- Stars
- (420 stars)
- PR merge metrics
- (No merged PRs in 30d)
Description
Volt Version
1.6.6
Laravel Version
11.37.0
PHP Version
8.3.13
Database Driver & Version
No response
Description
When using Volt's full-page component within Blade section directive I cannot get $wire to work in JavaScript as it can't find current component.
Could not find Livewire component in DOM tree
Steps To Reproduce
- Create simple layout
resources/views/layouts/bare.blade.php
<!DOCTYPE html>
<html>
<head>
<body>
@yield('body')
</body>
</html>
- Create Volt component
resources/views/livewire/email.blade.php
<?php
use function Livewire\Volt\{layout, state};
layout('layouts.bare');
state('email', 'test@example.com');
?>
<div>
@section('body')
<p x-data="{
email: $wire.$get('email')
}">Your email is: <span x-text="email"></span></p>
@endsection
</div>
- Add routing in
routes/web.php
<?php
use Livewire\Volt\Volt;
Volt::route('/email', 'email');
Because our alpine component is within blade's @section directive, it cannot find current Livewire component.