New Blade Components

In this article, we’ll take a look at the new blade components that are available in Laravel. Laravel 10 introduced a new syntax for creating blade components. Therefore, allowing developers to create more expressive and reusable components.

Technically, blade components already exist inside Laravel but Laravel 10 brings a brand new class-based component, anonymous component, and a new way of displaying components in your frontend HTML markup.

Creating New Blade Components

If we look at the list of available artisan commands, you’ll find a new make:component artisan command. You could also use --help a flag to check optional parameters.

For example, let’s create a sample component called Sidebar.

php artisan make:component Sidebar

After you execute this command, two new files are generated in app\View\Components\Sidebar.php and resources\views\components\sidebar.blade.php.

Next, here’s the generated Sidebar.php class and sidebar.blade.php.

# app\View\Components\Sidebar.php

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class Sidebar extends Component
{

    /**
     * Create the component instance.
     *
     * @return void
     */
    public function __construct()
    {
         //
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */
    public function render()
    {
        return view('components.sidebar');
    }
}

# resources\views\components\sidebar.blade.php

<div>
   <!-- Sidebar -->
</div>

Rendering Components

Once your component class and view file are in place, you can simply render a blade component using a tag alias within one of your blade templates starting with the string x- followed by the kebab case name of the component class:

<x-sidebar/>

Passing Data into Your Components

You can also pass data into components using html attribute.

<x-sidebar title="My Sidebar"/>

If you have data coming from the outside or want to pass data stored in a variable. Then, you can with attributes that are prefixed with :

<x-sidebar :title="$title"/>

So, before you can use this $title value. You need to accept $title your component class constructor function __contsruct and initialize it as a public property.

class Sidebar extends Component 
{
	/**
	* @var string
	*/
	public $title;

	/**
	* Create a new component instance.
	*
	* @param string $title
	*/
	public function __construct(string $title)
	{
	   $this->title = $title;
	}

Now, the interesting thing about the component class is that all the public property are directly accessible in your sidebar.blade.php file as a variable.

After that, you can simply echo out the $title in your sidebar.blade.php like this.

<!-- /resources/views/components/alert.blade.php -->
<div>
  <h1>{{ $title }}</h1>
</div>

Passing Additional Content to Component

Sometimes you want to extend your component and add something a little extra. You can do this using components $slot.

<!-- /resources/views/components/alert.blade.php -->

<div>
   <h1>{{ $title }}</h1>

   {{ $slot }}
</div>

Now, you can pass the content to the slot by directly writing content into the component:

<x-sidebar title="My Sidebar">
    <strong>Whoops!</strong> Extra Content is Here
</x-sidebar>

Component Argument Casing

If your component constructor argument is using camelCase, then kebab-case should be used to reference arguments in your HTML attributes.

/**
 * Create the component instance.
 *
 * @param  string  $alertType
 * @return void
 */
public function __construct($alertType)
{
    $this->alertType = $alertType;
}

The $alertType argument should be passed in like this:

<x-alert alert-type="danger" />

Anonymous Components

An Anonymous component is just a component that has a single view file without a concrete class. Instead, an anonymous component only needs to be placed within your resources/views/components directory.

For instance, assuming you have defined a component at resources/views/components/alert.blade.php. You may use it like this:

<x-alert/>

However, If your component is deeper inside a folder, you can use . characters to denote folders. For example, assuming you have resources/views/components/inputs/button.blade.php. You may use it as:

<x-inputs.button/>

You can also easily apply extra classes or data attributes in your component markup HTML using the component’s attribute bag.

<x-sidebar title="My sidebar" class="bg-gray text-black"/>

Simply echo out the $attributes in the top of divtag inside your sidebar.blade.php.

<div {{ $attributes }}>
    {{ $title}}
</div>

Similarly, you can even set default styling to the component. The additional classes will be merged with the default class accordingly.

<div {{ $attributes->merge(['class' => 'bg-gray']) }}>
    {{ $title}}
</div>

In Conclusion

In this article, you learned the approach of using the new Laravel blade components available in Laravel 10. However, you could always extend the logic by implementing smaller reusable components either using a component with a concrete class attached or an anonymous component depending upon your needs.

Get more information about new blade components on Laravel blade templates docs.