Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.
I've been using Laravel some time ago, in the versions 5.x. Now I am starting new project and offcourse with latest Laravel. I have some uncertainties about using "new" blade components. For instance I am not sure when(and how) are dynamic parts passed as component attribute, and when as a slot for instance.
Right now I am structuring single template where I will pass page title as parameter on every page using that layout component. Another part is form element which will differ, and some certaing css classes on certain div that may be optional. Page title in header offcourse
<title>{{ $title }} </title>
<div class"main-class {{ $optionalClasses }}"></dv>
and form elements
<form>
...
{{ $slot }}
</form>
And I think usage would go like this:
<example-layout title="Some title" optional-classes="some-class">
// form elements here
</>
Am I doing this right? Also when am I suppose to use slots, and when dynamic attributes like this? What is another confusion for me is that syntax with attributes :attribute="$attribute"
According to me, slots are fine to add content inside a blade component.
https://laravel.com/docs/9.x/blade#slots
For example if you are designing a modal window, you will add some custom content inside the modal via a slot.
Whereas for example the background color can be passed as an attribute.
https://laravel.com/docs/9.x/blade#component-attributes
But you can also pass the title as an attribute, it's not really the content but the title of the layout.
And what about this syntax with colon, :attribute="$attribute"? Does it make any difference if you pass attribute in that way, or by <x-component attribute="attribute-value">? TBH the docs on Laravel website is a little confusing(for me at least). For instance there are examples of how you do something in blade component like way, but there is no example what you get.
@Cvetan The difference between :attribute="$attribute" and attribute="value" is that when you add :, you specify a variable that is interpretated to give its value, whereas without : you immediately give the value.
$variable = "black";
...
<x-component :attribute="$variable" />
Is equivalent to this.
<x-component attribute="black" />
and
<x-my-rad-component :thisIsPhpVarialbe="$posts" this-is-an-attribute="whatever" />
if you want to pass a variable and the component is expecting $posts you use the shorthand...
<x-my-rad-component :$posts />
So practically if component had something like this:
@foreach ($post as $post)
<h1>$post->title</h1>
<div>$post->content</h1>
@endforeach
I could do something like this:
<x-component :$posts /> right? Do I understand it right?
yep the same for the post itself.
slightly off topic, but the catch for me is less about function and more about where the files are...
Say you have a folder called post in your views. (I like all my views for posts to go there). Using components you either have to register it or make a path destination. Otherwise the view will nest inside of components directory. aint-nobody-got-time-for-dat. So I often use an include instead...
@foreach ($posts as $post)
@include('post._card', ['post' => $post]) // old school
@endforeach
This keeps my directories organized.
And my personal opinion is.. components are for site wide reusable stuff. Not domain/feature specific content.
Thank you both, that clarifies much for me. I need to have some practice tought. 😀 🍺
@Cvetan yep, keep us posted! And please mark a best reply to close the thread.
Please or to participate in this conversation.