Laravel: Blade Components 101
Tags: laravel, php, beginners, tutorial
Published: 2021-03-19 18:58:40

---
title: Laravel: Blade Components 101
published: true
description: 
tags: laravel, php, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gtn28d72lk1rx07mjq1d.jpeg
---
Follow me!: <a href="https://twitter.com/EricTheCoder_" class="twitter-follow-button" data-show-count="false">Follow @EricTheCoder_</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<hr>
I publish regularly here on Dev.to, click follow if you want to miss nothing. 

You can also follow me on Twitter: <a href="https://twitter.com/justericchapman?ref_src=twsrc%5Etfw" class="twitter-follow-button" data-show-count="false">Follow @justericchapman</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


<h2>Blade components</h2>
Blade components are a subset of blade template that allow you to create new custom, reusable, encapsulated PHP and HTML.

For example you may want to create a navbar to be used in many of your application pages. So you build your navbar as a component and can reused the component wherever you want.

When created, component can be call with same syntax as any html tag:
```html
<html>
    <body>
        <x-navbar/>
    </body>
</html>
```

<h2>Class based component</h2>
Class based component is compose of a php file that encapsulate component logic and a template file.

To create a class based component you can use the Artisan command make:component 

```
php artisan make:component Alert
```
This command will create two files:
```
app\View\Components\Alert.php
resources\views\components\alert.blade.php
```

The Alert.php file is a class that inherits from Component
```php
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public function __construct()
    {
        //
    }

    public function render()
    {
        return view('components.alert');
    }
}
```
the alert.blade.php template file is an empty container:
```html
<div>
    
</div>
```

Let's do an example. The final goal will be to display a alert message and style that message base on the alert type (error or success)

When the component will be created you can call your new component by using the x-name syntax:
```html
<x-alert type="error" :message="$message"/>
```
The x- is a convention that tell Laravel to render the specified component name.

The ":" prefix in :message tell Laravel that the content of the props will be bind to a php expression/variables.

When you append the x- before the component name, Laravel know where to look to find your component.

:type and :message are data pass to the component

You can retreived those value in the component class file:
```php
<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;
    public $message;

    public function __construct($type, $message)
    {
        $this->type = $type;
        $this->message = $message;
    }

    public function render()
    {
        return view('components.alert');
    }
}
```
Inside your component template, you may display the contents of your component's public variables by echoing the variables by name:
```html
<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>
```

<h2>Component Attributes</h2>
Sometimes you may need to specify additional HTML attributes, such as class that are not part of your component data.

```html
<x-alert type="error" :message="$message" class="mt-4"/>
```
If you want to pass these additional attributes down to the root element of the component template you can use the $attributes variable. 
```html
<div {{ $attributes }}>
    
</div>
```

That will render to:
```html
<div class="mt-4">
    
</div>
```
If a class attribute already exist in your div you can use $attributes->merge to merge both together.
```html
<div {{ $attributes->merge(['class' => 'alert alert-'.$type]) }}>
    {{ $message }}
</div>
```
That will render to:
```html
<div class="alert alert-error mt-4">
    
</div>
```

<h2>Slot</h2>
You will often need to pass additional content to your component via "slots". Component slots are rendered by echoing the $slot variable. 

You can pass content to the component: 
```html
<x-alert>
    This is a alert
</x-alert>
```

The slot content can now be use anywhere inside our component template:
```html
<div class="alert alert-danger">
    {{ $slot }}
</div>
```

You can pass multiple content (slot) by naming those:
```html
<x-alert>
    <x-slot name="title">This is a alert</x-slot>
    <x-slot name="sub">This is a sub message</x-slot>
</x-alert>
```

Those name slots contents can be use anywhere inside our component template:
```html
<div>
    {{ $title }}
    {{ $sub }}
</div>
```
<h2>Conclusion</h2>
That's it for today. Tomorrow the journey continue, if you want to learn more about component, read Laravel Official documentation: https://laravel.com/docs/8.x/blade#components 
If you want to be sure to miss nothing click follow me here or on twitter!

Follow me!: <a href="https://twitter.com/EricTheCoder_" class="twitter-follow-button" data-show-count="false">Follow @EricTheCoder_</a><script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
<hr>