Get "PHP 8 in a Nuthshell" (Soon includes PHP 8.4)
Amit Merchant

Amit Merchant

A blog on PHP, JavaScript, and more

Dynamic blade components in Laravel 8

With the release of Laravel 8, you can now render Blade components dynamically using a built-in component called dynamic-component.

Essentially, you can use dynamic components in scenarios where you’d want to render components based on the value of a variable. i.e in scenarios where it’s not known which component to render until runtime.

Using dynamic-component component

For instance, a situation where you show a certain message to the user in the user/edit.blade.php component based on a certain action. Let’s say success, error, or warning on user creation. And there are three different components for these messages called success.blade.php, error.blade.php, and warning.blade.php respectively.

Now, when the user creation is successful, for example, you can set a variable called $messageComponent from the controller like so.

return view('user.edit', ['messageComponent' => 'success']);

And success.blade.php component can be rendered “dynamically” in user/edit.blade.php like so.

<x-dynamic-component :component="$messageComponent" />

This is equivalent to using the following.

<x-success />

As you can see, the components can be now rendered dynamically. So, if for some reason, the user creation is not successful, all you’ll need to do is just set the messageComponent to error and you’re done. You don’t need to touch the Blade template in this case.

Note: When using dynamic-component, you can not simply pass in the component name directly to :component like so:
<x-dynamic-component :component="alert" />

This will throw the error: Use of undefined constant alert - assumed 'alert'

Passing down the attributes

You can, of course, pass down various attributes to the underlying Blade components in dynamic-component like so.

<x-dynamic-component :component="$messageComponent" class="text-red-900" />

And these attributes are available to the component’s “attribute bag” like so.

// error.blade.php

<div {{ $attributes }}>
    User can not be created
</div>

This will ultimately get rendered to the following.

<div class="text-red-900">
    User can not be created
</div>
Learn the fundamentals of PHP 8 (including 8.1, 8.2, and 8.3), the latest version of PHP, and how to use it today with my new book PHP 8 in a Nutshell. It's a no-fluff and easy-to-digest guide to the latest features and nitty-gritty details of PHP 8. So, if you're looking for a quick and easy way to PHP 8, this is the book for you.

Like this article?

Buy me a coffee

👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.

Comments?