Blade Components — Laravel 10 Discovery Training

In this new chapter, we will re-explore the Blade part and we will talk about components which are a slightly different way of managing the inclusion of pieces of logic in our views. So far we have used the directive @include which allowed a simple inclusion with a classic PHP syntax but Laravel was inspired by vuejs to offer an alternative syntax closer to HTML and which is more readable.

<x-field label="Titre" :value="$post->title"/>

Creating a component is done using the command

php artisan make:component Alert

Automatically, it will create 2 files:

  • A class, which is used to process the information passed to the component and that sent to the view.
  • A blade file that will generate the HTML code.

The component will then be usable as a custom HTML element by prefixing its name with x-

<x-alert type="success">Merci pour votre achat !</x-alert>

If your components have little logic you can just create a blade view.

php artisan make:component Alert --view