Laravel introduces a robust feature known as "Components," enabling developers to craft reusable and encapsulated UI components. Blade components, introduced in Laravel 7.x, offer two approaches: class-based components and anonymous components. Here, we'll focus on class-based components.

To create a class based component, you may use the make:component Artisan command. To illustrate how to use components, we will create a simple AppLayout component. The make:component command will place the component in the app/View/Components directory:

php artisan make:component AppLayout

The make:component command will also create a view template for the component. The view will be placed in the resources/views/components directory. When writing components for your own application, components are automatically discovered within the app/View/Components directory and resources/views/components directory, so no further component registration is typically required.

After running the make:component command, you will have two files: app/View/Components/AppLayout.php (class file) and resources/views/components/app-layout.blade.php (Blade template). Here's how you can use the Layout component in your Laravel views:

it looks like this:

<?php
 
namespace App\View\Components;
 
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
 
class AppLayout extends Component
{
    /**
     * Create a new component instance.
     */
    public function __construct()
    {
        //
    }
 
    /**
     * Get the view / contents that represent the component.
     */
    public function render(): View|Closure|string
    {
        return view('app-layout');
    }
}

<!-- resources/views/components/app-layout.blade.php -->
 
<div>
 
</div>

Define the Component's Blade Template

Open the app-layout.blade.php file located in the resources/views/components directory. Define the HTML structure for your AppLayout component in this file. This structure will serve as the layout for your views:

<!-- resources/views/components/app-layout.blade.php -->
@props(['title'])
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Laravel App' }}</title>
    <!-- Include your CSS and JS files here -->
</head>
<body>
    <header>
        <!-- Include your header content here -->
    </header>
 
    <main>
        {{ $slot }}
    </main>
 
    <footer>
        <!-- Include your footer content here -->
    </footer>
</body>
</html>

In this AppLayout, we've employed the $title variable to dynamically set the page title. The $slot variable represents the content that will be passed into the AppLayout from the views.

Use the Layout Component in Views

To utilize the AppLayout component in your views, invoke it with the x-app-layout directive and pass any necessary data as attributes. Here's an example of its usage in a view:

<!-- resources/views/welcome.blade.php -->
 
<x-app-layout title="Welcome to My Laravel App">
    <div class="container">
        <h1>Welcome to My Laravel App</h1>
        <!-- Your page content goes here -->
    </div>
</x-app-layout>

In this example, we're passing the title "Welcome to My Laravel App" to the AppLayout component. The content within the x-app-layout tags will be rendered inside the layout's $slot.

Include Dynamic Data

You can include dynamic data in your AppLayout component by passing additional attributes when using it in views. For example, you can pass SEO description or keywords as attributes to include them in the AppLayout:

<!-- resources/views/welcome.blade.php -->
 
<x-layout title="Welcome to My Laravel App" description="I love Laravel" keywords="Laravel, PHP, Framework">
    <div class="container">
        <h1>Welcome to My Laravel App</h1>
        <!-- Your page content goes here -->
    </div>
</x-layout>

In the app-layout.blade.php file, you can add description and keywords using the attributes passed to the component.

<!-- resources/views/components/app-layout.blade.php -->
@props(['title','description','keywords'])
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ $title ?? 'My Laravel App' }}</title>
    <meta name="title" content="{{ $title ?? 'My Laravel App'}}"/>
    <meta name="description" content="{{ $description }}"/>
    <meta name="keywords" content="{{ $keywords}}">
    <!-- Include your CSS and JS files here -->
</head>
<body>
    <header>
        <!-- Include your header content here -->
    </header>
 
    <main>
        {{ $slot }}
    </main>
 
    <footer>
        <!-- Include your footer content here -->
    </footer>
</body>
</html>

And that's it! You've now created a AppLayout component in Laravel and used it in your views to maintain consistent layout structure across your application.

Conclusion

In conclusion, leveraging Laravel's components feature, specifically class-based components, provides a robust solution for creating reusable and encapsulated UI elements. With the make:component Artisan command, developers can swiftly generate components and their corresponding Blade templates, fostering modularity and efficiency in development workflows.

How To Create Applayout Component In Laravel

Define the Component's Blade Template

Use the Layout Component in Views

Include Dynamic Data

Conclusion

Discussion