Jump to content

Laravel Blade Components.

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 --view

Running 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.


{{ $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!

Looking to scale up your development team?

Don’t let limited resources hold you back. Get in touch to discuss your needs and discover how our team augmentation services can supercharge your success.

Contact Us

Create a form

Run the following to create our anonymous index component

php artisan make:component form.index --view

Normally to group components together you would have to have a form component then have the rest of the forms components inside a folder.


Anonymous index components allow you to group your components together.


Usage 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 --view

Here 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 --view

This 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

Short Attribute Syntax

Named Slots – You can have multiple slots in a component by giving them names.

You’d achieve this by doing the following

Laravel Partner

Since 2014, we’ve built, managed and upgraded Laravel applications of all types and scales with clients from across the globe. We are one of Europe’s leading Laravel development agencies and proud to support the framework as an official Laravel Partner.

Get in touch

Vue Experts

We use Vue alongside Laravel on many of our projects. We have grown our team of experts and invested heavily in our knowledge of Vue over the last five years.

Get in touch