Vue compatibility

[realsamanrad]

Hi. Is there any procedure for using with Vue/Nuxt ?
Thanks

[borisdiakur]

Hi @samanrd
I'm happy you asked this question, because I like working with Vue myself and would like to make Liquid as friendly as possible for Vue developers. That said, we've been concentrating with framework specific bindings on React so far. I would like to pick up this topic and see if it makes sense to also integrate Vue bindings in the project. That should improve the DX for Vue developers. For now, you can still use Liquid without any framework specific bindings in a Vue project. We have a couple of sandbox applications in our docs which demonstrate how you can use Liquid in different tech stacks. You'll find a Vue app at the top of the list. The project is using Vue's defineComponent with JSX in order to have type checking and intellisense. My hope is that Vue specific bindings would help achieving the same DX with Vue template syntax.

I changed your issue to a discussion for now. Let me know if you think Vue bindings are a must for using Liquid in Vue. Then we'll open up a new issue to track progress on that task. Any thoughts, ideas are welcome.

[borisdiakur]

UPDATE: I found some time to work on this topic. The latest Liquid version (v4.2.0) now includes Vue bindings. The Vue sandbox app demonstrates how to integrate Liquid in a Vue app using these bindings. Please have a look 👀
I'll try to find some more time to also create another sandbox app using Nuxt. It should be pretty similar to the existing sandbox app.

[borisdiakur]

We now have also a Nuxt based sandbox app.

You may notice that it includes a patch: There is an issue with Nuxt and the vue output target. It's not a deal breaker, but I have already reported it to the stencil team anyway.