Please explain how it works

#1

app.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">
        @livewireStyles
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-menu')
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>
            <main>
                {{ $slot }}
            </main>
        </div>
        @stack('modals')
        @livewireScripts
    </body>
</html>

created livewire component

<?php
namespace App\Http\Livewire;

use Livewire\Component;
use App\Models\Test_123;

class Organizations extends Component {
    public $modalFormState = false;

    public function render() {
        return view('livewire.test_123');
    }
}

livewire.test_123.blade.php

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('test_123') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-xl sm:rounded-lg">
            	<div class="p-6">
					@if($modalFormState)
						yes
					@endif
	                <x-jet-button class="ml-4" wire:click="create()">
	                    {{ __('Create') }}
	                </x-jet-button>
	            </div>
            </div>
        </div>
    </div>
</x-app-layout>

if web.php is

<?php
use Illuminate\Support\Facades\Route;
use App\Http\Livewire\Test_123;

Route::middleware(['auth:sanctum', 'verified'])->get('test_123', Test_123::class)->name('test_123');

got
ErrorException
Undefined variable: header (View: C:\laragon\www\bill2\resources\views\layouts\app.blade.php)
If

<?php
use Illuminate\Support\Facades\Route;

Route::middleware(['auth:sanctum', 'verified'])->get('/test_123', function () {
    return view('livewire.test_123');
})->name('test_123');

got
ErrorException
Undefined variable: modalFormState (View: C:\laragon\www\bill2\resources\views\livewire\test_123.blade.php)

#2

Hey, @RizONEnew

The $header and $slot it actually belongs into a component.

When you create a laravel component let say app-layout so you can define variables into the component blade and use them later on.

<x-app-layout>
    the contents here belongs into the {{ $slot }} variable

   and if you want to define the {{ $header }} content you can like so
    <x-slot name="header">
     Content of your header
    </x-slot>
</x-app-layout>

For more info please see:
https://laravel.com/docs/8.x/blade#components