Most hits on this refer to Undefined $slot in components when I search through google.
When setting up my project, I installed:
composer require laravel/ui --dev
php artisan ui bootstrap --auth
In my 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="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
@stack('slider-head')
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style>
.bi {
vertical-align: -.125em;
fill: currentColor;
}
</style>
@stack('header-css')
</head>
<body>
<div id="app">
<main class="p-2">
{{ $slot }}
</main>
</div>
</body>
</html>
In my home.blade
<x-app-layout>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
app.blade.php in Laravel UI isn't a Blade component by default.
Laravel Breeze/Jetstream layout components are Blade components with slots. Here's the component of Breeze: AppLayout https://github.com/laravel/breeze/blob/f7ae3e926f5259f8460cb7621be7ad2d436d9f83/stubs/default/app/View/Components/AppLayout.php#L14
@PovilasKorop Thank you. :) That worked. I made a new app.blade component layout.
Please or to participate in this conversation.