All Blade Templates lessons

Components & slots

6 min read

A component is a .blade.php file under resources/views/components/. Use it like an HTML tag.

{{-- resources/views/components/alert.blade.php --}}
<div {{ $attributes->merge(['class' => 'alert alert-' . $type]) }}>
    <strong>{{ $title }}</strong>
    <div>{{ $slot }}</div>
</div>
<x-alert type="error" title="Oops">
    Something went wrong.
</x-alert>

Named slots

<x-card>
    <x-slot:title>Pricing</x-slot:title>
    Body content.
</x-card>

Class-based components

Generate one with php artisan make:component Alert — you get a backing PHP class where you can compute props, format data, etc. The view stays simple.

The $attributes bag

Any HTML attribute you pass that's not a defined prop lands in $attributes. Use ->merge(['class' => '…']) to extend rather than overwrite.