Laravel livewire how to use slot and @yield ?

I am giving a try to laravel8 with livewire. I could manage to achieve registration and login making 2 livewire components register and logger. I use a layout that is very simple at the moment but I am stuck because I don't really understand the use of @yield('content') vs the use of slot. Here is my layout :

<html>
    <head>
        @livewireStyles
        <link rel="stylesheet" href="/css/app.css">  
    </head>
    <body class="  bg-gradient-to-tr from-jbodyleft  via-green-900  to-jbodyleft">
        <div class="bg-blue-300 text-2xl h-10 text-center  my-14">
             @if( auth()->user())
                 {{auth()->user()->firstname}} {{auth()->user()->familyname}} est connecté
            @endif
            </div>
        {{ $slot }}
   
        <div class="bg-blue-300 text-2xl h-10 text-center  my-14">
           This is the footer
       </div>
       @livewireScripts
    </body>
</html>

My routes are :

    Route::get('/', function () {
        return view('home');
    })->name('home');

    Route::get('/register',App\Http\Livewire\Auth\Register::class)->name('register');
    Route::get('/login',App\Http\Livewire\Auth\Logger::class)->name('login');
    Route::get('/logout', function(){ Auth::logout();})->name('logout');

and the home.blade.php is

    @extends('layouts.app')
       @section('content')
           <div class=" flex items-center w-content m-auto p-32 text-4xl">Hello ! I am the home page !</div>
     @endsection

with the layout as it is described before, I correctly display the register and logger pages but not the home page. If I change {{$slot}} with @yield('content') I correctly display the home page but not the register and logger pages. Should I use 2 different layouts ?

Snapey

5 years ago

Level 122

Read up regarding Laravel 7 view components. None of this is Livewire related.

https://laravel.com/docs/8.x/blade#components

1 like

Meaulnes

5 years ago

Level 1

Thank you for your answer. It was of great help to me. i now have a better understanding of the mechanism of components and slots as described into the laravel doc and inside this page https://www.larashout.com/using-laravel-blade-components-and-slots. If I understand correctly it is more or less like includes with the additional possibility to populate slots provided into the component when using it in a view template.

Nevertheless, I still have trouble understanding the mechanism that is described in the livewire documentation and make use of it.

Full-Page Components

If the main content of a page is a Livewire component, you can pass the component directly into a Laravel route as if it were a controller.

Route::get('/post', ShowPosts::class);

By default, Livewire will render the ShowPosts component into the {{ $slot }} of a blade layout component located at: resources/views/layouts/app.blade.php

<head>
    @livewireStyles
</head>
<body>
    {{ $slot }}

    @livewireScripts
</body>

I don't understand how it works behind the scene but, provided I accept this, with such a layout I cannot render a normal view. For this I have to provide à @yield('content') directive in the layout, that is not compatible with the rendering of a livewire full page component with the route

Route::get('/register',App\Http\Livewire\Auth\Register::class)->name('register');

If I place both i.e. {{ $slot }} and @yield('content') in the layout, livewire full page components are still rendered but normal views are not. In the last case the server complains that the slot variable is undefined.

Thus my initial question: Should I use a different layout for my normal views (not components)?

But now, after having read all this stuff i am speaking about, I think I could use the @yield('content') directive in the layout, render the livewire components the classic way i.e. livewire:auth.register/ , discard the livewire full page component routing way, recreate a view for the livewire component such as

@section('content')
  <livewire:auth.register>
@endsection

and use the classic routing way

Route::get('/register', function() { return view('auth.register');})->name('register');

Am I right?

thewebartisan7

5 years ago

Level 14

Yes you are right. There are two way to load Livewire component, full page component or inline component.

See here https://laravel-livewire.com/docs/2.x/rendering-components

Inline: https://laravel-livewire.com/docs/2.x/rendering-components#inline-components Full page: https://laravel-livewire.com/docs/2.x/rendering-components#page-components

Meaulnes

5 years ago

Level 1

Thank you. It's good to hear I don't miss it all but, by the way, is there no mean to avoid the creation of an additional template only to render the component's view when it is needed to render it alone on a full page?