DEV Community

Cover image for Building Components in the Beautiful Laravel
Mina Farag
Mina Farag

Posted on

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.

step by step

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.

Discussion (4)

Collapse
ptejada profile image
Pablo Tejada

A few typos: bardName, Boot::

Collapse
__mfarag profile image
Mina Farag Author

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

Thank you

Collapse
komalbandi profile image
Komal Bandi • Edited on

Very helpful, thank you very much for that.