How to create Layout using Blade Components in Laravel 9 / 10

By Ved Prakash N | Aug 15, 2023 | Laravel

How To Create a Laravel 9 / 10 Layout using Laravel Blade Component

In this post, you will be learning how to create a blade templating with blade component in laravel

Create Layout with Blade Template Using Template Inheritance in Laravel

In a typical Laravel application, you might have a file called layouts/app.blade.php that all of your other views extend from.

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        <div id="app">
            <main>
                @yield('content')
            </main>
        </div>
        @yield('scripts')
    </body>
</html>

And in your actual pages, you will extend that view and provide your content within the content section. Here's an example welcome.blade.php file or create any other file and do the same as shown below:

@extends('layouts.app')

@section('title',"Home Page")

@section('content')
  <div>My Page content is here</div>
@endsection

@section('scripts')
    <!-- Some JS and styles -->
@endsection

Create Layout with Blade using Component in Laravel

So guys, let's see how we can make use of our newly learned Blade components to refactor this.

Step 1: First of all, we are going to create a new component called "AppLayout" by running the below command:

php artisan make:component AppLayout

Step 2: we can take all of our existing layout view code and place it inside of our new layout component view in the following
path: "resources/views/components/app-layout.blade.php"

You can use any of the below format to create a blade component layout.

Format 1:

go to path: "resources/views/components/app-layout.blade.php"

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>

        <title>{{ $title ?? 'Funda Of Web IT' }}</title>

    </head>
    <body>

        <div id="app">
            <main>
                {{ $slot }}
            </main>
        </div>

        {{ $scripts ?? '' }}

    </body>
</html>

Now lets Extend the layouts in the pages / blade files as follows: so let's go to welcome.blade.php file and paste the below code

<x-app-layout>

    <x-slot name="title">Funda Of Web IT</x-slot>

    <div>
        My Page content is here
    </div>

    <x-slot name="scripts">
        <!-- Your script code -->
    </x-slot>

</x-app-layout>

You can use from this <x-slot name="title">Custom Title</x-slot> to <x-slot:title>Custom Title</x-slot> this

Format 2:

go to path: "resources/views/components/app-layout.blade.php"

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>

        <title>{{ $title ?? 'Funda Of Web IT' }}</title>

    </head>
    <body>

        <div id="app">
            <main>
                {{ $slot }}
            </main>
        </div>

        @yield('scripts')

    </body>
</html>

Now lets Extend the layouts in the pages / blade files as follows: so let's go to welcome.blade.php file and paste the below code

<x-app-layout>

    <x-slot name="title">Funda Of Web IT</x-slot>

    <div>
        My Page content is here
    </div>

    @section('scripts')
        <!-- Your script here -->
    @endsection

</x-app-layout>

Format 3:

go to path: "resources/views/components/app-layout.blade.php"

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>

        <title>@yield('title')</title>

    </head>
    <body>

        <div id="app">
            <main>
                @yield('content')
            </main>
        </div>

        @yield('scripts')

    </body>
</html>

Now lets Extend the layouts in the pages / blade files as follows: so let's go to welcome.blade.php file and paste the below code

<x-layout>

    @section('title','Funda Of Web IT')

    @section('content')
      <div>My Page content is here</div>
    @endsection

    @section('scripts')
        <!-- Your script here -->
    @endsection

</x-layout>