There are a lot of new features in L8 but we are going to discuss a feature that is not adopted by most of the devs and it’s cool addition in Laravel and best to use in time-saving and escape the repetition of code.

First, we will discuss a scenario where we can use or where we should use the component in our Laravel project. e.g. I am developing a Job Portal where I need a wishlist feature and there will be a UI that needs to render on different screens to show wishlist Jobs to the user. So I have an HTML for that and I am writing the code on each page where I need to show wishlist and it’s as usual in Laravel projects. But if we create a component to render the wishlist HTML then it will save a lot of repetition and time.

Finally, I created a component by using a command.

php artisan make:component Wishlist

And this command provides me a View in resources/views/components/wishlist.blade.php and a PHP file in app/View/Components/Wishlist.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-wishlist/>

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

defining-component

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. e.g.

And in the component’s blade file we can access variables using blade expression.{{$Job->title}}

This is the basic usage of components that we can use in our Laravel Projects, but you should go deeper by exploring official docs.

URL:- https://laravel.com/docs/8.x/blade#components