Laravel Blade is becoming more and more like Vue... @class directive and others

▶

As I mentioned when I did a brief analysis of Laravel version 12, one of the things I like most about this new version is that I feel like everything is a little more integrated:

Laravel is NO LONGER *only* a PHP Framework

Now we don't just have, for example, Laravel, and if you want to use Vue you have to use a package with Jetstream, Inertia, and all those "newbies," but everything now feels like part of the same system.

And that "something more" is a rather interesting combination of various technologies, depending on what you want to use.
If you want to use React, you already have a scaffolding ready.
If you want to use Vue, it's also ready. There are even community projects (a topic I also talked about in another video; if I did, I'll leave the card here) where you can use other frameworks like Svelte, among others.

And obviously there's also Alpine. I don't think I mentioned it before, but React, Alpine, and Vue are the ones that come by default. And of course, pure Laravel, without any add-ons, or as I call it: Laravel Base.

The Evolution of Blade

What I like most, beyond all this integration, is that Blade has also improved a lot.
It feels more and more like Vue, which I obviously love.

If we go to the official Blade documentation, we can see how it works in basic ways.
I won't go into too much detail because I assume you're already familiar with it, but it all starts with a simple printout of data from the server, just like in Vue (I mention this because it's the framework I use the most):

{{ $name }}

Although Angular, React, Astro, etc., also work similarly in this basic part.

In addition to printouts, Blade has conditionals, and what I like is that there are also specific conditionals, such as @auth or @guest, to verify whether the user is authenticated or a guest.
There are also directives like @empty, @isset, and others. These "fillers" make the code much cleaner and easier to read:

@isset($records)
    // $records is defined and is not null...
@endisset
 
@empty($records)
    // $records is "empty"...
@endempty

Of course, all of this can be done with a classic if statement and PHP functions, but this is more elegant, especially when you're in Blade and need to display conditional content in a simple and readable way.

Interesting discovery: the @class directive
But what I really wanted to tell you about, and which I only recently discovered thanks to the Laravel Daily channel (I recommend it, although it's in English), is the @class directive.

I wasn't familiar with it, and it was precisely one of the things I didn't like about Blade: when I wanted to conditionally apply a class.
With this directive, you can do exactly that, similar to how it works in Vue:

@class([
 'active' => $isActive,
 'disabled' => !$isEnabled,
])

I've always thought this kind of logic was "backwards" because I like to put the condition first and then the value, but hey, that's how it works.
And it works the same in Vue, Alpine, etc.

The nice thing is that you can evaluate multiple conditions without having to write @if all over the place.
The @class directive does this automatically. You can even put regular classes alongside conditions:

@class([
 'text-red' => $hasError,
 'font-bold',
])

And if you use negations, it also works: 'text-gray' => !$hasError.