Laravel component issue with Alpinejs

[mr-chetan]

Laravel Version

11.33.2

PHP Version

8.3

Database Driver & Version

No response

Description

when I pass x-transition to a component it renders as x-transition="x-transition"

How do we fix this issue it also gives an error on the console

Steps To Reproduce

Make component

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

and then call the component like this

    <x-test x-transition>
        content
    </x-test>

I will give the output

<div x-transition="x-transition">
    content
</div>

Need to be output

<div x-transition>
    content
</div>

[danie-ramdhani]

related: https://github.com/laravel/framework/issues/50994

and i think it won't fix.

try:

<x-test :attributes="(new \Illuminate\View\ComponentAttributeBag())->merge(['x-transition' => ''])">
    content
</x-test>

[mr-chetan]

Thanks for the suggestion I am trying to resolve on Laravel side instead using this type of resolution

When i find proper solution i will raise the PR

related: https://github.com/laravel/framework/issues/50994

and i think it won't fix.

try:

<x-test :attributes="(new \Illuminate\View\ComponentAttributeBag())->merge(['x-transition' => ''])">
    content
</x-test>

[devriazul]

Thank you for raising this issue! I understand how this could be frustrating when integrating Alpine.js with Laravel components. I'll investigate this further to determine if we can address it directly within Laravel's attribute rendering logic.

In the meantime, you can use the following workaround to ensure x-transition is rendered correctly:

<x-test :attributes="(new \Illuminate\View\ComponentAttributeBag())->merge(['x-transition' => ''])"> content </x-test>

This approach ensures the attribute is rendered as expected. Let me know if this helps, and I'll keep you updated on any progress toward a core fix!

[mr-chetan]

Pull request #54021