Laravel 8 and TailwindCSS Undefined variable: header

Question

I am new to Laravel 8 and TailwindCSS so I need your help with the following problem.
I just created a new folder inside resources and one blade file that extends the layouts.app. When I access this file through the browser I am getting the following error:
Undefined variable: header (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php) (View: C:\xampp\htdocs\library\resources\views\layouts\app.blade.php).
On the other hand, if I comment out the variable $header (and $slot) then I don't get the code that I wrote in that blade file.

My code for routes:

`Route::get('/', function () {
    return view('welcome');
});
Route::post('books', [BooksController::class, 'store']);
Route::patch('books/{book}', [BooksController::class, 'update']);
Route::delete('books/{book}', [BooksController::class, 'destroy']);
Route::get('/authors/create', [AuthorsController::class, 'create']);
Route::post('authors', [AuthorsController::class, 'store']);
Route::post('/checkout/{book}', [CheckoutBookController::class, 'store']);
Route::post('/checkin/{book}', [CheckinBookController::class, 'store']);
Route::middleware(['auth:sanctum', 'verified'])->get('/dashboard', function () {
    return view('dashboard');
})->name('dashboard');`

The code for app.blade:

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        @livewireStyles

        <!-- Scripts -->
        <script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.js" defer></script>
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100">
            @livewire('navigation-dropdown')

            <!-- Page Heading -->
            <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>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>

        @stack('modals')

        @livewireScripts
    </body>
</html>

And finally, the code for the new blade file called create:

@extends('layouts.app')

@section('content')
    <div class="bg-gray-300 h-screen">
        <h1>ada</h1>
    </div>
@endsection

Thank you in advance,

{{ $header }} add in your layout file so you need to pass data from every controller or use laravel view composer laravel.com/docs/8.x/views#passing-data-to-views — Kamlesh Paul
– Kamlesh Paul, Commented Sep 24, 2020 at 10:58
You need to pass the $header data in your new view as well. — PatricNox
– PatricNox, Commented Sep 24, 2020 at 11:11

rogramatic · Accepted Answer · 2020-10-28 10:01:58Z

2

It seems you're using livewire in your code. Therefore, you need to create a livewire component. You can find a guide on how to do that here: https://laravel-livewire.com/docs/2.x/making-components.

If you go through the guide above, you'll end up with two new files: a livewire component file and a blade view file that renders the component. You can then add the following to the blade file:

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

<div class="bg-gray-300 h-screen">
   <h1>ada</h1>
</div>

The first part occupies the header's slot while the other takes the main slot. I hope this helps to clarify things a bit.

answered Oct 28, 2020 at 10:01

rogramatic

3114 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Spot Over a year ago

My question is, how does the system know which layout to use (since we're not specifying; e.g. <x-app-layout>) ?

wiwa1978 Over a year ago

I have the same question.It works, but would expect we need to set <x-app-layout></x-app-layout> as well

rogramatic Over a year ago

@wiwa1978 I think you can find the answer here. In summary, if you are creating full-page components, livewire provides a way to map a route to a livewire component class.

Collectives™ on Stack Overflow

Laravel 8 and TailwindCSS Undefined variable: header

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related