[Laravel] Laravel Blade Templates – overly simplified

I am going to use Laravel Blade Templates to render H1 tag in orange. It is overly simplified Laravel Blade Templates guide line. The full documentations are available on https://laravel.com/docs/blade

First of all, create any customized resources you need like css, js or image files under /public directory. I am going to create /public/waterloobae.css as below.

h1 {
    color: orange;
    font-size: 50px;
    text-align: center;
}

After that, create component to render H1 tags for Layouts or Views under /resrouces/views/components/. The file name will be waterloobae-h1.blade.php

Component

<h1>
    {{ $slot }}
</h1>

<h1>
    {{ $h1 }}
</h1>

php artisan make:component WaterloobaeH1

// /app/View/Components/WaterloobaeH1.php
<?php
namespace App\View\Components;
use Illuminate\View\Component;

class WaterloobaeH1 extends Component
{
    public $h1;

    public function __construct($h1)
    {
        $this->h1 = $h1;
    }

    public function render()
    {
        return view('components.waterloobae-h1');
    }
}

{{ $slop }} takes context what goes inside <x-waterloobae-h1></x-waterloobae-h1> tags. {{ $h1 }} takes property value of h1 in the opening tag like <x-waterloobae-h1 h1=”Hello There!”></x-waterloobae-h1>.

Layout

Finally, we are going to make layout for overly simplified template under /resources/views/layouts. The file name will be waterloobae.blade.php and one more file under /app/View/Components/WaterlooLayout.php. Those two file will be created with command of

php artisan make:component WaterloobaeLayout

// /app/View/Components/WaterloobaeLayout.php
<?php

namespace App\View\Components;
use Illuminate\View\Component;

class WaterloobaeLayout extends Component
{
    public $title;

    public function __construct($title)
    {
        $this->title = $title;
    }

    public function render()
    {
        return view('layouts.waterloobae');
    }
}

The view layout is created under /resources/views/layouts/ as waterloobae.blade.php and it looks as

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @vite(['resources/css/app.css', 'resources/js/app.js'])
    <link rel="stylesheet" href="{{ asset('waterloobae.css') }}">
</head>

<body class="tex2jax_ignore" data-aos-easing="ease" data-aos-duration="400" data-aos-delay="0">
    <x-waterloobae-h1 h1="{{ $title }}"></x-waterloobae-h1>
        <div class="body">			
            {{ $slot }}
            <br>
        </div>
    </div>
</body>
</html>

View

Since we have layout and component to render the page, view page can be simple as below. It is stored as waterloobae.blade.php under /resources/views.

<x-waterloobae-layout title="Hello There!">
    <div class="py-12 text-4xl text-center">
        Welcome to Waterloo BAE!
    </div>
</x-waterloobae-layout>

Route

The route to this page is added to /routes/web.php below. Then it can be accessed as http://yoursite/waterloo.bae.

Route::get('/waterloobae', function () {
    return view('waterloobae');
});

Screen will look like

It was overly simplified version of how to get orange H1 heading in your Laravel application with Blade Template. Hope It Helps!