Pass vue prop to alpine inside vue component

[qrczak]

I have this Alpine line to change class:
x-bind:class="{ 'bg-gray-200': !on, 'bg-green-500': on }"

inside Vue component and it's works fine but now I would like pass color (in this case - green) as variable from Vue, like this:
x-bind:class="{ 'bg-gray-200': !on, 'bg-{{ color }}-500': on }"

or like this

x-bind:class="'{ 'bg-gray-200': !on, 'bg-${color}-500': on }'"
and of course it's not working.

And the question is - is it possible at all in any way?

[KevinBatdorf]

It might be possible if you want to listen to events form vue. You would have Vue emit an event when the color changes, and then in your alpine component listen for it:

<div x-data="{ color: 'blue' }" @vue-color-change.window="color = $event.detail.color">

I haven't tried this but I think it should work...

Unrelated, but be careful building Tailwind classes like that as they will be purged unless you whitelist them.

[ryangjchandler]

I'd also be careful using the @ syntax with Alpine since Vue uses the same syntax. Best to be safe and use x-on:vue-color-change.