Level 29
In dashboard.layout.php you have <x-layouts.app> at the end, change it to </x-layouts.app>
Sep 3, 2024
2
Level 5
Undefined variable $slot in blade components on a Livewire 3 project
Hello i'm doing a Laravel + Livewire 3 project but i'm having a headache with Blade components I dont know why the $slot on my app.blade.php isn't working. Tried to use the layout/extends on Livewire component but it seems i'm doing something wrong, should be mandatory to use layout/extends on my Livewire component, in another project using Livewire 3 (but using Volt instead) it wasn't necessary.
app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ $title ?? 'Page Title' }}</title>
@vite(['resources/css/app.css', 'resources/js/app.js'])
@livewireStyles
</head>
<body class="font-sans antialiased text-white/50">
<div class="bg-[#fafafa] dark:bg-[#251C2D] text-black/50 min-h-screen">
<x-banner class="w-full" />
<main class="w-full mt-6 max-w-full">
<livewire:header class="w-full" />
<div class="mt-4">
{{-- <livewire:dashboard class="w-full" /> --}}
{{ $slot }}
</div>
{{-- create a section where we will explain what the website is about --}}
<section class="bg-gray-100 p-6 shadow-md mt-8 mb-8 w-full">
<div class="container">
<h2 class="text-2xl font-bold mb-4">About Us</h2>
<p class="text-gray-700 leading-relaxed">
Welcome to our website! We are dedicated to providing you with the best content and resources available. Our mission is to offer valuable information and services that cater to your needs and interests. Whether you are looking for the latest news, in-depth articles, or helpful tools, we have something for everyone. Thank you for visiting, and we hope you enjoy your time here!
</p>
</div>
</section>
</main>
<x-footer class="w-full" />
</div>
@livewireScripts
</body>
</html>
dashboard.blade.php
<x-layouts.app>
<div class="bg-gray-100 shadow-md container mx-auto p-4">
<h1 class="text-2xl font-bold mb-4">DASHBOARD</h1>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
@foreach($categories as $category)
<livewire:category-card :category="$category"
:key="$category->id" />
@endforeach
</div>
</div>
<x-layouts.app>
Dashboard livewire component
<?php
namespace App\Livewire;
use Livewire\Component;
use App\Models\Category;
use Livewire\Attributes\Layout;
class Dashboard extends Component
{
public function render()
{
$categories = Category::all();
return view('livewire.dashboard', [
'categories' => $categories
]);
}
}
livewire config file
<?php
return [
/*
|---------------------------------------------------------------------------
| Class Namespace
|---------------------------------------------------------------------------
|
| This value sets the root class namespace for Livewire component classes in
| your application. This value will change where component auto-discovery
| finds components. It's also referenced by the file creation commands.
|
*/
'class_namespace' => 'App\\Livewire',
/*
|---------------------------------------------------------------------------
| View Path
|---------------------------------------------------------------------------
|
| This value is used to specify where Livewire component Blade templates are
| stored when running file creation commands like `artisan make:livewire`.
| It is also used if you choose to omit a component's render() method.
|
*/
'view_path' => resource_path('views/livewire'),
/*
|---------------------------------------------------------------------------
| Layout
|---------------------------------------------------------------------------
| The view that will be used as the layout when rendering a single component
| as an entire page via `Route::get('/post/create', CreatePost::class);`.
| In this case, the view returned by CreatePost will render into $slot.
|
*/
'layout' => 'components.layouts.app',
/*
|---------------------------------------------------------------------------
| Lazy Loading Placeholder
|---------------------------------------------------------------------------
| Livewire allows you to lazy load components that would otherwise slow down
| the initial page load. Every component can have a custom placeholder or
| you can define the default placeholder view for all components below.
|
*/
'lazy_placeholder' => null,
/*
|---------------------------------------------------------------------------
| Temporary File Uploads
|---------------------------------------------------------------------------
|
| Livewire handles file uploads by storing uploads in a temporary directory
| before the file is stored permanently. All file uploads are directed to
| a global endpoint for temporary storage. You may configure this below:
|
*/
'temporary_file_upload' => [
'disk' => null, // Example: 'local', 's3' | Default: 'default'
'rules' => null, // Example: ['file', 'mimes:png,jpg'] | Default: ['required', 'file', 'max:12288'] (12MB)
'directory' => null, // Example: 'tmp' | Default: 'livewire-tmp'
'middleware' => null, // Example: 'throttle:5,1' | Default: 'throttle:60,1'
'preview_mimes' => [ // Supported file types for temporary pre-signed file URLs...
'png', 'gif', 'bmp', 'svg', 'wav', 'mp4',
'mov', 'avi', 'wmv', 'mp3', 'm4a',
'jpg', 'jpeg', 'mpga', 'webp', 'wma',
],
'max_upload_time' => 5, // Max duration (in minutes) before an upload is invalidated...
'cleanup' => true, // Should cleanup temporary uploads older than 24 hrs...
],
/*
|---------------------------------------------------------------------------
| Render On Redirect
|---------------------------------------------------------------------------
|
| This value determines if Livewire will run a component's `render()` method
| after a redirect has been triggered using something like `redirect(...)`
| Setting this to true will render the view once more before redirecting
|
*/
'render_on_redirect' => false,
/*
|---------------------------------------------------------------------------
| Eloquent Model Binding
|---------------------------------------------------------------------------
|
| Previous versions of Livewire supported binding directly to eloquent model
| properties using wire:model by default. However, this behavior has been
| deemed too "magical" and has therefore been put under a feature flag.
|
*/
'legacy_model_binding' => false,
/*
|---------------------------------------------------------------------------
| Auto-inject Frontend Assets
|---------------------------------------------------------------------------
|
| By default, Livewire automatically injects its JavaScript and CSS into the
| <head> and <body> of pages containing Livewire components. By disabling
| this behavior, you need to use @livewireStyles and @livewireScripts.
|
*/
'inject_assets' => true,
/*
|---------------------------------------------------------------------------
| Navigate (SPA mode)
|---------------------------------------------------------------------------
|
| By adding `wire:navigate` to links in your Livewire application, Livewire
| will prevent the default link handling and instead request those pages
| via AJAX, creating an SPA-like effect. Configure this behavior here.
|
*/
'navigate' => [
'show_progress_bar' => true,
'progress_bar_color' => '#2299dd',
],
/*
|---------------------------------------------------------------------------
| HTML Morph Markers
|---------------------------------------------------------------------------
|
| Livewire intelligently "morphs" existing HTML into the newly rendered HTML
| after each update. To make this process more reliable, Livewire injects
| "markers" into the rendered Blade surrounding @if, @class & @foreach.
|
*/
'inject_morph_markers' => true,
/*
|---------------------------------------------------------------------------
| Pagination Theme
|---------------------------------------------------------------------------
|
| When enabling Livewire's pagination feature by using the `WithPagination`
| trait, Livewire will use Tailwind templates to render pagination views
| on the page. If you want Bootstrap CSS, you can specify: "bootstrap"
|
*/
'pagination_theme' => 'tailwind',
];
My app.blade file is in views/components/layouts tried following the Livewire documentation for layout files but i'm missing something or doing something wrong.
Level 5
@gych Oh sorry was testing why wasn't working and misspelled. But it's not this what's causing the error, fixed that typo and still not working.
Please or to participate in this conversation.