livewire
Could not find Livewire component in DOM tree when using Volt full-page
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', '[email protected]');
?>
<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.
The workaround I used was to create view that uses blade's @section directive and embeds Volt component.
@extends('layouts.bare')
@section('body')
<livewire:email />
@endsection
And I've removed layout from component together with @section('body').
Thank you for reporting this issue!
As Laravel is an open source project, we rely on the community to help us diagnose and fix issues as it is not possible to research and fix every issue reported to us via GitHub.
If possible, please make a pull request fixing the issue you have described, along with corresponding tests. All pull requests are promptly reviewed by the Laravel team.
Thank you!
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
Hi, it's been a while since this issue is open. If it hasn't been solved yet, I would suggest a solution that worked for me: replacing the $wire.$get('email') by Livewire.getByName('email')[0].email or Livewire.getByName('email')[0].get('email').
The first "email" is the component's name you declared in your route and the second one, the prop.
Since each component is an "isolated island", you can't use their local $wire outside of it. This JavaScript "hack" allows you to access any Livewire component on your page globally.
