February 9th, 2022  |  Victor Paredes

Laravel Blade 101: The Simple Stuff

Our objective is to set up a simple design pattern which features two Blade components—a header and footer—which can be reused in any view across the entire site. What we need is the ability to pass data, a <title> value in this case, along with any view that we use so that users know where they are (also for SEO 🚀). The best way to accomplish this is by using Blade's @slot feature.

Here is a wireframe of what we are doing:

Exciting!

First, let's set up our directory structure.

app/
resources
views
layouts
head.blade.php
foot.blade.php
welcome.blade.php


Next, let's create our head and foot blade templates. You can see this is where we put code that we don't want to have to re-type on each page of the site!

head.blade.php

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>{{ $title }}</title>

</head>
<body>
    HEAD (head.blade.php)

The only Blade-specific thing we are doing here is adding a variable between the <title> tag pair. We will inject data into this variable in our welcome view (below).

foot.blade.php

    FOOT (foot.blade.php)
</body>
</html>

Next, let's set up a welcome view where all of our magic will happen.
welcome.blade.php

@component('layouts.head')
    @slot('title')
        Welcome Title
    @endslot
@endcomponent

    Welcome View Content (welcome.blade.php)

@component('layouts.foot')
@endcomponent


Check it out! Whenever we want to pass data via a variable, we only need to call the variable in our blade component and then assign data via the @slot directive!

Meet the Author
 

Victor Paredes is a web and print designer. When not hard at work, you can find him tinkering around with code, music, artwork, and archaic poetic structures. He is based in Portland, Oregon.
 
Close