Building Components in the Beautiful Laravel

In the beautiful Laravel We've so many useful tools to cutdown development-time and help building scalable modern web-apps. In this tech-note i'd like to guide you through the process of building and using Components.

1- What are Components in Laravel?

Components are a reusable group of elements. Like you may want to create a Navbar to be used in almost all of your web-app pages. So you build your Navbar as a Component and tell laravel to grab it whenever you need it, and for many times as you like.

2- how do i build & use Components ?

2-1
First of all let's create a new directory inside our Resources directory in a Laravel project, So at your side you'll have something like this structure (resources/views/layouts/components) .

2-2
Make a new file and call it ( navbar.blade.php ) and save it inside ' components ' directory you've just created in step 2-1 .

2-3
With any IDE ,'maybe sublime', Please copy and paste the following bootstrap Navbar code to your file navbar.blade.php

note that: i've deleted most of the navbar-tags for the reading-time but you can find the full tags code at BootStrap

code

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>

2-4
We've created components directory , navbar file as our new component example and finally added the code to the navbar.blade.php . Now it's time to use it. i will give you the Easy way first , then the professional way later on.

(Easy way):
Inside any page of your project let's assume it's index.blade.php and for sure it's inside the ' views ' directory, Please start using the following blade-directive.

code

@component('layouts.components.navbar')
@endcomponent

And you did it !! , Now you've successfully created a navbar-component and used it. But if you noticed this navbar is totally hardCoded and this is not good for building a dynamic project. So let's add some modifications to the navbar tags at navbar.blade.php .

2-4-2
I Will add a variable called barndName, please notice the following code modifications:

code

<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> {{$brandName}} </a>
</nav>

2-4-3
Now in the index.blade.php , I will inject the variable with a value to the component element using the same blade-directive like the following:

code

@component('layouts.components.navbar')
@slot('brandName')
value and it could be anything
@endslot
@endcomponent

please notice the new directive @slot , that i used to call the variable i've created in navbar.blade.php

A More Professional Way
We'll add a small modifications to the way we've just learned. and believe me it's not hard as it sounds. just follow my steps

2-4-4
Now what do you think if we named our component as navbar and just call it using the blade directive like @navbar, isn't it much easier and readable. Let's do it.

2-4-5
We need to tell laravel that the @navbar means the component navbar.blade.php you've just created, So please Laravel grab it once i call it @navbar.

Please go to the following file: (app/providers/appServiceProvider.php) , and go to the function boot() , then add the following code inside the function body

code

Blade::component('layouts.components.navbar','navbar');

the first part in brackets is the component location , and the second part is the name you wanna call it with. This process is called Aliasing.
now at any location in your webApp you just call your component with @navbar .

don't forget to import the Blade Facade inside your appServicesProvider.php .

OR just add this line before the class name.

code

use Illuminate\Support\Facades\Blade;

2-4-6
Now it's time to call your aliased , renamed component from any page within your webApp lets stay with index.blade.php (go back to point 2-4-3 to review the Easy way of calling your component)

now you just write the following code to call your navbar component and inject data to it.

code

@navbar(['brandName'=>'Munch any value']) @endnavbar

WOW you've just called your component and injected data into it.
please notice the following:

we inject data as an associative array. ['Name']=>['value'] pairs.
the name / key must have the same spelling as the variable in your component, review step (2-4-2).
if you defined more variables in your component, simply add them to your array like ['var1'=>'val1','var2'=>'val2'] .

2-5
Now you can easily build your own components and reuse it within any Laravel project you have just repeat the process whenever , wherever you want a component

3
Thanks for your time, i hope i was useful to you.
if you like my tech-note please feedback to me or give me hints on how to make it better.

Comments

[Pablo Tejada]

A few typos: bardName, Boot::

[Mina Farag]

Thanks Pablo , i’ve Edited the post and fixed the typos.

Thank you

[Abdullah]

Sir the second way you tell is not working first way is working fine, in second one the code you give
"
@navbar(['brandName'=>'Munch any value']) @endnavbar
"
is showing as it is.
Sir Kindly help it

[Komal Bandi]

Very helpful, thank you very much for that.