How to Create & Use Components in Laravel

In recent laravel projects that I have been working on, I noticed that I reuse a lot of UI components on the same project but also on other projects. This obviously means I was wasting time and also re-inventing the wheel every time I start a project.

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

So what is 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 a small entity 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:

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

To avoid me jotting them down all over my projects and the hustle of defining which is 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 using the component in a loop then 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}} * sorry about the typo

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 componets and use them that way.

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 componets 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!

Any questions or comments hit me up on

Mail: epmnzava@gmail.com

Twitter: https://twitter.com/epmnzava

github: https://github.com/dbrax