Laravel — P69: Blade Slots Intro

Aside from passing attribute data to blade components, sometimes you need to pass a large chunk of data. That data can be displayed through slots. Laravel renders the data by echoing out the $slot variable.

Laravel — P68: Defining Custom Directives in Blade

We’ll start by creating a button component. All we want to be able to do with our button component is change the inner-text. It’ll be located in resources/views/components/button.blade.php.

<button class="btn">
    {{ $slot }}
</button>

To use it, we’ll create a new Blade file: resources/views/blade-test/index.blade.php.

<x-button>
    Test
</x-button>

We just need a route to display it.

Route::get('/blade-slots', function () {
    return view('blade-slots.index');
});

And it worked. We got the result that we were hoping for. This template renders a button element with a class of 'btn', and the content of the button is defined by the $slot variable. You can use this template in other templates like this:

<!-- home.blade.php -->

@extends('app-layout')

@section('title', 'Home')

@section('content')
    <h1>Homepage Content!</h1>
    <x-button>
        Click me!
    </x-button>
@endsection

Slots are simple. Have fun with them!

GitHub - dinocajic/youtube-laravel

Dino Cajic is the CEO at MyAutoSystem. He’s also currently the Head of IT at Absolute Biotech, the parent company of LSBio (LifeSpan BioSciences, Inc.), Absolute Antibody, Kerafast, Everest BioTech, Nordic MUbio and Exalpha. He has a B.S. in Computer Science, a minor in Biology, and over a decade of software engineering experience. His background consists of creating enterprise level e-commerce applications, performing research based software development, and facilitating the spread of knowledge through writing.

You can connect with him on his website or his LinkedIn, follow him on Instagram, or subscribe to his Medium publication.

Read every story from Dino Cajic (and thousands of other writers on Medium). Your membership fee directly supports Dino Cajic and other writers you read. You’ll also get full access to every story on Medium.