Now we know how to create components in Laravel and how to include that components in any blade file. We have also already seen how to pass data in Laravel components. Now in this tutorial, I will show you how to use slot-inside components in Laravel.

We will often need to pass additional data to your component via "slots". In the Laravel component, component slots are rendered by echoing the $slot variable. To understand this concept, let's imagine that an alert component has the following example:

laravel-component-slot-tutorial

Just update this component blade file with your HTML like:

resources/views/welcome.blade.php

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Laravel 9.x Blade Components Slot Tutorial | Laravelia</div>
                <div class="card-body">
                    <x-alert>
                        <div class="alert alert-success">Hello! Coming from slot<div>
                    </x-alert>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

 

Now, we have to render this slot content like:

resources/views/components/alert.blade.php

<div>
    <legend>I am from mother | Laravelia</legend>
    {{ $slot }}
</div>

 

Read also: Passing Data To Components - Laravel Blade Components

 

Conclusion

I have tried to discuss the clear concept of laravel blade component slot. Now we know laravel unable to locate a class or view for component slot. Hope this laravel 9 component slot tutorial will help you.