Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Could not find Livewire component in DOM tree when using Volt full-page #130

Open
mattb-it opened this issue Jan 30, 2025 · 2 comments
Open

Could not find Livewire component in DOM tree when using Volt full-page #130

mattb-it opened this issue Jan 30, 2025 · 2 comments
Labels
help wanted

Comments

@mattb-it
Copy link

mattb-it commented Jan 30, 2025 •
edited
Loading

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

  1. Create simple layout resources/views/layouts/bare.blade.php
<!DOCTYPE html>
<html>
<head>
<body>
@yield('body')
</body>
</html>
  1. 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>
  1. 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.
@mattb-it
Copy link
Author

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').

@github-actions GitHub Actions
Copy link

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
help wanted
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@crynobone @mattb-it