Level 63
How do you have declared the layouts for each component ? Can you show an example please ?
1 like
Jul 30, 2023
26
Level 5
Livewire 3 - wire:navigate / navigate between to components that have different layout
When I navigate between two components using the new Navigate redirection and the two components have livewireStyles and livewrieScripts, when I return from a page that already loads the scripts and styles to a page that will load the scripts and styles I got a Warning
livewire.js?id=777821c0:8776 Detected multiple instances of Livewire running
livewire.js?id=777821c0:8778 Detected multiple instances of Alpine running
and when I do i any functionality that related to Livwire I got
TypeError: Alpine.navigate is not a function
my thoughts this is related to conflict of alpine loaded two times What i can do to prevent this?
Level 5
@vincent15000 I create two saparate layouts app.blade.php and auth.blade.php
And with my components i declare the specific layout for each componet Auth - login componet App - dashboard componet
1 like
Level 63
@MohammedAssafly How do you have declared the layouts for each component ?
For example do you declare the layout with ->layout(...) in the render method in the controller ? Or another way ?
1 like
Level 5
No I use the new attribute Layout inside the componet Because in my route I bind the route to the Livewire component directly
1 like
Level 63
@MohammedAssafly Can you show the code please ?
Level 5
\\ web.php
Route::get('login', \App\Livewire\Students\Login::class)->middleware('guest')->name('login');
Route::get('profile', \App\Livewire\Students\Profile::class)->name('profile');
\\ Login.php
<?php
namespace App\Livewire;
use Livewire\Attributes\Layout;
use Livewire\Component;
class Login extends Component
{
#[Layout('components.layouts.auth')]
public function render()
{
return view('livewire.login');
}
}
\\ Profile.php
<?php
namespace App\Livewire;
use Livewire\Attributes\Layout;
use Livewire\Component;
class Profile extends Component
{
#[Layout('components.layouts.app')]
public function render()
{
return view('livewire.profile');
}
}
1 like
Level 5
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl" class="h-full bg-gray-50">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }} - {{ $title ?? null }}</title>
@vite('resources/css/app.css')
@livewireStyles
</head>
<body class="antialiased h-full">
<!-- My HTML Layout HERE FOR APP -->
{{ $slot }}
@livewireScripts
</body>
</html>
auth.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="rtl" class="h-full bg-gray-50">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{ config('app.name') }} - {{ $title ?? null }}</title>
@vite('resources/css/app.css')
@livewireStyles
</head>
<body class="antialiased h-full">
<!-- MY HTML LAYOUT FOR AUTH -->
{{ $slot }}
@livewireScripts
</body>
</html>
1 like
Level 63
@MohammedAssafly Ok thank you ... well ... I think that it's normal that the entire page refreshed because you have really distinct layouts.
Partial reloads, I mean only component loading without refreshing the entire page, is possible when you have a common layout with a unique head and body with some same header, footer, and so on ...
I don't have tried it, but you should probably do that by having the same base layout for all of your application and apply some differences between app and auth.
Level 5
@vincent15000 But the Idea is to make separate Layouts I don't want to make a single layout for all my app pages and make some workarounds to make it work by default Livewire should not inject Alpinejs and Livewire twice in the Layout .
any idea how to solve this or it's a bug?
2 likes
Level 63
@MohammedAssafly According to me, a unique base layout to load once each script.
Then you probably can create two layouts (app and auth) which are children of the base layout.
1 like
Level 5
@vincent15000 Could you provide me with an example of your idea?
1 like
Level 63
@MohammedAssafly Here is an example of my idea. I don't have tested it, but it seems quite interesting, if it works, then I would be interested in using it too ;).
Base layout
<!doctype html>
<html>
<head>
</head>
<body>
@yield('template')
</body>
</html>
App layout
@extends('layouts.base')
@section('template')
// structure for visitors
<header>
</header>
<main>
@yield('content')
</main>
<footer>
</footer>
@endsection
Auth layout
@extends('layouts.base')
@section('template')
// another structure for members
<header>
</header>
<div>
<main>
<aside>
// menu for members
</aside>
@yield('content')
</main>
</div>
<footer>
</footer>
@endsection
Then you can add content to the app or auth layouts.
@extends('layouts.auth')
@section('content')
Hey I'm logged in !
@endsection
1 like
Level 5
@vincent15000 Your idea is based on the Extends directive I use the <x-layout> I Think <x-slot> will do the trick.
1 like
Level 63
@MohammedAssafly Yes you can also use the component syntax.
Base layout
<!doctype html>
<html>
<head>
</head>
<body>
{{ $slot }}
</body>
</html>
Auth layout
<x-layouts.base>
// another structure for members
<header>
</header>
<div>
<main>
<aside>
// menu for members
</aside>
{{ $slot }}
</main>
</div>
<footer>
</footer>
</x-layouts.base>
Auth content
<x-layouts.auth>
Hey I'm logged in !
</x-layouts.auth>
Level 1
Having the same issue and using only one layout. I'm only able to generate the error from a redirect from within the Livewire component, though.
Using Livewire 3 beta.5
3 likes
Level 5
@andreduarte Do you mean that Livewire maybe running multip instance when redirect with navigate flag on?
1 like
Level 63
@MohammedAssafly You can also redirect with passing a message to the redirection and display the message from the new page.
Or store the message to the session and then display it from the new page by retrieving the value from the session.
Level 1
@MohammedAssafly Even with navigate off it happens
2 likes
Level 63
@andreduarte Have you tried the teleportation ?
https://livewire.laravel.com/docs/teleport
UPDATE => I'm wront, I meant the persisting functionality.
@persist('player')
<audio src="{{ $episode->file }}" controls></audio>
@endpersist
https://livewire.laravel.com/docs/navigate#persisting-elements-across-page-visits
Level 1
@vincent15000 Doesn't help. Downgraded to Livewire 2, and no issues.
1 like
Level 63
@andreduarte Persisting doesn't work ?
Level 63
@andreduarte You should try again.
Somebody just managed to do that. It seems to be a similar problem as your one.
https://laracasts.com/discuss/channels/livewire/livewire-events-with-alpine-js?page=1&replyId=899846
Level 5
@andreduarte Have you checked if you have already installed alpinejs? Because livewire 3 already do that fo you
1 like
Level 63
@mohammedassafly If you have solved the problem, please close the post by assigning a best answer ;).
Level 5
@vincent15000 I will try it and response to you ASAP.
1 like
Level 63
@MohammedAssafly I just tested the livewire navigation with a unique layout and 2 different sublayouts.
Please or to participate in this conversation.