# How to create AppLayout component in laravel

By Dinesh Uprety
Published: 2024-03-07
Updated: 2024-03-07
Canonical: https://laranepal.com/blog/how-to-create-applayout-component-in-laravel

Laravel introduces a robust feature known as "**[Components](https://laravel.com/docs/10.x/blade#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
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
<?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');
    }
}
```
```html
<!-- 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:
```html
<!-- 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:
```html
<!-- 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`:
```html
<!-- 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](https://laravel.com/docs/10.x/blade#component-attributes) passed to the component.
```html
<!-- 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](https://laravel.com/docs/10.x/blade#components) 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.