How to create and use of Laravel components

Components play important roles when you want to create reliable and extensible systems. In the beautiful Laravel, We've so many useful tools to cut down development time and help to build scalable modern web apps. In this article we will explain the process of building and using Components.

What is Laravel components?

Laravel Components are used to build reliable and extensible systems. They let us build large applications which are made up of reusable, independent, and decoupled components. Laravel provides us so many tools to help to build reliable web applications and cutting down the development time to significant levels. Laravel is magnificently composed of components that are reusable and are efficiently defined and compiled together to bring up the whole system.

Before creating and use of Laravel components, let us know how to install Laravel application.

Installation of Laravel 8 application:

Laravel installation can be done in two ways.

• Laravel Installer

• By using composer

Laravel Installer

First of all, we need to install its installer first. We need to make use of the composer for that. Use the below command to install the Laravel installer. This installation is at global scope, so you type the command from any directory at the terminal.

$ composer global require laravel/installer

To verify the command:

$ laravel

This command will open a command palette of Laravel Installer.
To create and install the Laravel project in the system,

$ laravel new blog

With the name of blog, a Laravel project will be created at your specified project.

By using composer

We can also install the Laravel composer command to create a project. If you don’t have composer install first of all install composer and create a project:

$ composer create-project --prefer-dist laravel/laravel blog

After following these steps, we can install a Laravel 8 application into system. To start the development server of Laravel –

$ php artisan serve

This command outputs –

Starting Laravel development server: http://127.0.0.1:8000

Building a component

we have divided the whole process into some easily understandable small steps which are as follows:

Step 1: we need to create our new directory. This new directory will be residing in the Resources directory. A structure like the one written below will be there on your side:

resources/views/layouts/components

Step 2: Now you have to create a new file that you have to save under the ‘components’ directory which was created in the previous step. We will call it ‘navbar.blade.php’.

Step 3: Now write the following code for Navbar to navbar.blade.php file. Any IDE can be used.

Example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="#">Features</a>
<a class="nav-item nav-link" href="#">Pricing</a>
<a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>

Output:

Using components

So far, we have created our directory ‘components’, created a new file ‘navbar’ and written code into navbar.blade.php. Inside directory ‘views’, let’s suppose a page of your application like far, use the blade directive as shown below:

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

You have used your very first component. But this is a hardcoded navbar. And it is not a good idea to use this while building a modern dynamic application project. Let’s do a bit of modification in navbar tags in file navbar.blade.php.

Now we will add brandName variable into the navbar code, keep an eye on the modifications done in the previous code we wrote for the navbar. We are just showing the part of the coding where modifications have been performed.

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

If you wish to pass values to your component, you can do so by injecting a variable with the help of blade-directive. Let’s see the coding showing the use of directive ‘@slot’ as follows:

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

Example

@component('alert')
@slot('title')
Forbidden
@endslot
You are not allowed to access this resource!
@endcomponent

Here the content which is not in directive @slot will be passed through variable $slot to the component.

A better way to use components is described as follows:

What if we can call our component just by using directive @navbar? Wouldn’t it be much easier? Yes, it will be a lot more readable and easier at the same time. Let’s roll.

For this to be implemented, we just have to define that @navbar means the same as navbar.blade.php, the file which you just created. Once we have successfully done this, Laravel will automatically take navbar.blade.php when we will call @navbar.

For this to work, we have to add the below-mentioned code to ‘boot()’ function in file

app/providers/appServiceProvider.php.
Blade::component('layouts.components.navbar','navbar');

Here in the code, the first parameter is the location of the component and the second parameter is the new name you want to give to it (navbar in our case). You might have heard about this process before which is known as aliasing. Now you just have to call @navbar in order to call your component.

You can exclude the parameters of the component if there are no added slots.

@alert
You are not allowed to access this resource!
@endalert

Note: You have to either add the following line of code before your class name or import Blade Facade in appServicesProvider.php use Illuminate\Support\Facades\Blade.

Your component has been renamed now and you are free to call your component from any point in your application project using just @navbar.

Let’s see how you will call your component as below:

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

You have now successfully called the component navbar and passed data to it.

Conclusion

I hope this tutorial will help you to create and use laravel components.

For more Article: Click here