CODEWITHSUNDEEP
laraveltailwind-csslaravel-8
mtrip
mtrip

Reputation: 67

Laravel 8 and TailwindCSS Undefined variable: header

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,

Upvotes: 0

Views: 3971

Answers (1)

rogramatic
rogramatic

Reputation: 311

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.

Upvotes: 2

Related Questions