AlpineJS conditional classes on blade components

[ju5t]

Is it possible to add conditional classes to blade components?

I opened an issue/question with Blade UI Kit as the class didn't get applied and I thought it may be related to the attribute parsing happening there, but it may be an issue in AlpineJS (?) or perhaps the components itself.

Ref: blade-ui-kit/blade-icons#80

[MuzafferDede]

I think it is how blade behaves on : attributes. Maybe you should use x-bind:class="{'class' : variable}" since :class is just an alias of x-bind:class.

[ju5t]

Thanks! It works. Is there a specific reason why x-bind works and only using :class doesn't?

[MuzafferDede]

When using a BladeX component all attributes assigned with : will be passed as variables to the underlying Blade view. So :class="['somthing']" will be pass to view as $class = ['something'].

For future use cases do not use @ and : shorthands for alpine on blade views. Instead use x-bind: and x-on:

[ju5t]

Got it. Thanks for very quick reply!