Rewriting Blade Views Templates to Components

Laravel keeps growing for past years and many features added to the framework. I know following the new updates and features is hard, especially when you still focus on your work(s) and don't have time to learn and research things. Eventually, it got you left behind.

They said Laravel was leaving people behind... 😈 pic.twitter.com/OCLppFXrVC

— Taylor Otwell ⛵️ (@taylorotwell) December 3, 2020

But if you love laravel enough as I do, You should have the feeling to explore more and master more. I am also one of those people who got left behind but I don't want to stay put. The most have-to-learn feature of laravel that I haven't learned yet is the Blade Component. I still using the normal blade views and partial templates to this day. I want to learn this because there are some cool packages that deal with blade components these days, like Livewire and Blade UI kit, so it is much worth trying.

Let's find out if this feature is really changing the game of how I develop a web or maybe not.

The best way to start and learn blade components

Start a new laravel app and use the Laravel Breeze as the UI and Auth scaffolding. This starter kit has two components prepared for you in the app\View\Components folder, they are AppLayout.php and GuestLayout.php who work as the layout for your authenticated/admin page and auth-guest related page. Laravel Breeze is the best starting point if you want to develop a TALL stack app.

Refactoring the views to use AppLayout component

Let's say you used to write this kind of view for the 'products' index/list page:

@extends('layouts.app')

@section('content')
<div class="container-fluid">
    <div class="row justify-content-center">
        <div class="col-md-8">
           {{ __('Product List') }}

           ...

        </div>
    </div>
</div>
@endsection

And if we see the generated resources\views\dashboard.blade.php by laravel-breeze, it already wrapped inside the AppLayout component:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Dashboard') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-md sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    You're logged in!
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

Then we could easily imitate this template to use it for our product index view like this:

<x-app-layout>
    <x-slot name="header">
        <h2 class="font-semibold text-xl text-gray-800 leading-tight">
            {{ __('Product List') }}
        </h2>
    </x-slot>

    <div class="py-12">
        <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
            <div class="bg-white overflow-hidden shadow-md sm:rounded-lg">
                <div class="p-6 bg-white border-b border-gray-200">
                    {{-- Product list goes here --}}
                </div>
            </div>
        </div>
    </div>
</x-app-layout>

If we see the resources\views\layouts\app.blade.php here:

...

           <!-- Page Heading -->
            <header class="bg-white shadow">
                <div class="px-4 py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
                    {{ $header }}
                </div>
            </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>

...

The HTML inside <x-slot name="header"> component will goes the {{ $header }} and the rest of HTML inside <x-app-layout> will goes to the {{ $slot }}.

more coming...