Laravel Blade is a powerful templating engine that allows developers to create dynamic and reusable views in a Laravel application. One of the key features of Blade is the ability to create reusable and composable components, which can help speed up front-end development. By enabling the creation of reusable components that provide consistent styles and behaviour, developers can avoid the need to construct elements from scratch. Instead, they can simply make use of the components that already exist.
In this article we will create a basic form that shows you some benefits and techniques of blade components.
Creating your first component
There are two types of components: class-based and anonymous. Class-based components have a class and a view template, while anonymous components only have a view template. In most cases, anonymous components are sufficient, and I tend to use class-based components only when I need to use dependency injection.
php artisan make:component layouts.app --viewRunning the above command will create our first component, a layout file named resources/views/components/layouts/app.blade.php. This file will be the layout of the app.
/resources/views/components/layouts/app.blade.php
{{ $slot }} will render whatever we pass to it. For example, passing Hello World! will render it on the page. Slots are what make blade components composable. We can pass components to other components and even use named slots!
Create a form
Run the following to create our anonymous index component
php artisan make:component form.index --viewNormally to group components together you would have to have a form component then have the rest of the forms components inside a folder.
/resources/views/components/form.blade.php
/resources/views/components/form/group.blade.phpAnonymous index components allow you to group your components together.
/resources/views/components/form/index.blade.php
/resources/views/components/form/group.blade.phpUsage would look like
We define the props we want the component to accept. We are able to set some sensible defaults. Most forms have the method as POST so we set that as default. When forms are sending files we need to have the enctype attribute. Instead of typing it out every time we make the component add this attribute on when we need it.
We want to make sure the developer passes an action when using this component so we set action as a prop but set no default value. When no action is passed Laravel will throw an error if we do not do an isset() check.
Echoing out $attributes allows us to pass any additional attributes we need without having to define them in the props.
In the above example we use the :action attribute. We use the : prefix to denote that it is a PHP expression or variable. We could also do :action="$someRoute". If it is a hardcoded or primitive value we do action="/" like normal.
Create text input
When working with inputs I like to create a group component that can take the input component. This group will display the label, help text and any errors.
php artisan make:component input.group --viewHere we are setting a default class using $attributes->class(['block']). If we were to pass the class attribute any classes would be merged with block.
We use @class() to conditionally set classes. text-gray-700 inline-block mb-1 is always displayed, text-red-500 is only merged into the default when $error is present.
If we don’t pass a prop in then it is not defined, that is why we use @isset($help) and @isset($error) to check if they are set. We could also set the props to have null as their default value and check for that.
Next we will create a text input
php artisan make:component input.text --viewThis component uses @aware(). This allows the child component to access data in the parent component.
Create button
Finally we can create a button to submit our form. We will use an anonymous index component again. This is because I don’t want to access the button directly, instead I want to use this component inside primary, secondary buttons.
php artisan make:component button.index --view
Next we create our primary button. You can see that we are using the x-button inside our primary component.
php artisan make:component button.primary --view
Separating the x-button component means that we can re-use it in multiple places, even using it on its own.
Putting it all together
Now we have created our components we can start to use them together. We first use our form component to wrap all our inputs, in this instance we only need to pass the route as the action. Next we have a couple of input groups, these take a label, for and an error. The error comes from the validation error bag that is available to all views. Passed to the input groups slot is the input. In this example we are using automatic attributes to pass along the old value to the value attribute. Lastly we use our button to submit the form.
We can mix blade components with plain HTML as well.
Bonus Tips
Named Slots – You can have multiple slots in a component by giving them names.
You’d achieve this by doing the following
