VueJs and AlpineJS on the same page

[abasse]

I would like to use AlpineJS on a page area that is part of a bigger VueJS application.
I have some trouble to run a template tag. Any suggestions, ideas if this is possible and how this can be done.

Thanks!

[ryangjchandler]

@abasse Have you got an example of the code, this just makes it a bit easier to help you out.

[KevinBatdorf]

During a chat on Discord we figured out that x-for definitely does not work. But x-if and everything else should be fine.

I haven't tested it but you might try adding v-pre to the template

https://vuejs.org/v2/api/#v-pre

[KevinBatdorf]

I just tried using v-pre with no success.

[abasse]

Hi Kevin. Thanks for your help.

[akaspick]

Bumping this as I have both VueJS and AlpineJS in the same app and Alpine is throwing errors for HTML that uses the shorthand :field syntax for v-bind. Alpine and Vue both use the same shorthand syntax for attribute binding, but in my case there is no root Alpine element on the HTML that uses the shorthand bind syntax, so only Vue should be evaluating it and Alpine should be ignoring it.

<a :href="project_link"></a>

Alpine Expression Error: project_link is not defined

[SimoTod]

Are you totally sure that you don't have x-data or x-init on a parent element? Alpine doesn't process anything if it's not in a component.

[akaspick]

@SimoTod I just removed every instance of x-data (not using x-init) in the app and have Alpine (3.9.5) loading via CDN and it's throwing the errors on the vue component.

I'll see if I can put together a codepen of the issue occuring.

[akaspick]

Ok, this might be an issue when using Alpine with the Turbo library https://github.com/hotwired/turbo

I can't reproduce the error in basic site, but when I transition between pages using Turbo, the error appears. Producing a test case for this using Turbo might be a bit more work, but I'll see if I can come up with something.

[mtomov]

@akaspick have you managed to get the 2 working together with Turbo?

[akaspick]

I did, but I no longer recall all of the details. I'm pretty sure I had to remove the use of shorthand directives as Alpine and Vue both use some of the same ones and I think that's mainly what cleared things up.

[mtomov]

I see. That makes sense. Thanks for the quick reply!