Using Components in Laravel: A Gentle Introduction

In recent Laravel projects that I have been working on, I noticed that I reuse a lot of UI components in different projects. This obviously means I was wasting time and also re-inventing the wheel every time I started a project.

Then I discovered Laravel components; I blamed myself for not seeing this earlier as it could have saved me a lot of time in my projects.

So what are Laravel components?

They are sort of slots that let us build large applications which are made up of reusable, independent, and decoupled components.

Almost all modern systems are composed of self-contained, independent, reusable small entities. Each of these entities has a specific functionality provided to the system as a whole. The Laravel components are small entities with an interface that is well defined. These serve as the building block for a large software system. All the related data is encapsulated in the reusable unit.

To help you understand more, let me share a Laravel component that I am building for my admin-dashboard starter kit.

See below!

An Alert Component

So I noticed that I use alerts a lot, specifically in these three areas:

On authentication to display error and success messages to the user.
When I store a model to show to the user that he/she has successfully stored some data.
When I redirect a user after completing some tasks.

To avoid jotting them down all over my projects and the hustle of defining an information alert or warning alert, or failed alert, I will create a simple component that I will later reuse; please follow along.

First, I will create a component using a Laravel command:

php artisan make:component Alert

The above command will do two things create a view template for the component on resources/views/components/alert.blade.php also create a file on app/View/Components/Alert.php

Where I wrote my wishlist HTML in the blade file and some PHP code in the PHP file.

Once your component has been generated, it may be rendered using its

name:<x-alert/>

We can also pass variables in the component via attributes that are prefixed with :

<x-alert :message="$message"/>

You have to define the component’s required data in its class constructor (In Provided PHP FILE). All public properties on a component will automatically be made available to the component’s view.

It is not necessary to pass the data to the view from the component’s render method. But if you use the component in a loop, then you have to pass data in the render method as well see below.

And in the component’s blade file, we can access variables using blade expression.{{$message}}.

Well, that's mostly it. I can reuse

<x-alert/>

anywhere on my views also if I start a new project, I can just copy my components and use them that way.

I am still looking for a way that I can store them, say, on a package management system then hit a command that will generate all my saved components. Maybe even choose the ones that I want at that particular time. Know of such a solution? Please let me know in the comments section.

Before you go… Thanks for reading the article! If you enjoyed it, please don’t forget to show your appreciation by clicking 👏 below!

If you have any questions or comments, contact me:

Mail: [email protected]

Twitter: https://twitter.com/epmnzava

github: https://github.com/dbrax