How to integrate Phoenix 1.6 with vue and esbuild

Phoenix Forum Questions / Help
1

Please anybody know how to use Vue with Phoenix 1.6 and esbuild

thanks

1 Like
2

I wrote a tutorial about how to do this:

5 Likes
3

Thank you for writing this post :heart: :green_heart: :blue_heart: :orange_heart: :yellow_heart: :purple_heart: I wish there were more examples of how to add various frontend frameworks to Phoenix (React, Vue, Webpack, Vite, etc…)

My concern though is that I don’t know how well esbuild-vue is maintained. Also, relatedly, this library is self described as “An esbuild plugin for loading and compiling Vue 2 single-file components.” but Vue 3 has been out for some time now.

Humble opinion :bowing_man:

4

Hi @noargs :wave:

I did some research on this when 1.6 was announced and came across some discussion about how esbuild can’t work with vue so easily (insert hand waving here). Continuing the search I found mention that ViteJS (which uses ESBuild internally) could be an option.

Here is a thread about how to add ViteJS to Phoenix 1.6:

I’ve seen @thiagomajesk in a few threads about this and I suspect his insights would be very helpful.

Please keep us posted as to how it goes. Was it easy to integrate? Any issues in production? How was the deployment process? Yada yada yada :sweat_smile:

1 Like
5

Yeah, I can’t speak for the reliability of this setup. I was looking for the answer to how to get Vue working with Phoenix 1.6, and came across multiple questions asking the same thing with no answers, so I went and figured it out myself. I am new to Phoenix, but it seems that the ecosystem hasn’t quite caught up with release 1.6 yet. My opinion is the same with regards to Vue 3. Even though it has been out for quite a while, the ecosystem is highly unstable.

As for how Vue plays with Phoenix, I actually haven’t really used them “together”. I am not making use of any Phoenix routing or templating. It looks like AlpineJS is definitely the way to go if that’s the direction you want.

6

Yeah, I hope the eco-system catches up but I would bet it actually doesn’t because webpack was removed. To add vue previously one would simply google for Vue+Webpack and it worked (that’s how I’ve been using Vue with Phoenix for a few years now). Now that webpack as been removed, and there’s no appetite for re-adding it back to the library there’s very little “support” for folks to feel comfortable going ahead.

I’m guessing the blessed path now is only LiveView so if anyone wants to do Phoenix on hard mode they’d be adding in their own frontend framework.

For side projects/experiments I think it’s fine to figure out how to add React/Vue/Svelte/Angular and see how it goes, but I’m not sure I’d risk my company’s product on LiveView or with my janky handrolled Vue/Vite integration just yet :sweat_smile: .

I’m super appreciative of the example you provided on adding vue to phoenix. :pray: Like I said before, I wish there were way more examples.

2 Likes
7

Thanks for the thanks!

I think the key issue is that even though esbuild doesn’t require as much configuration, it isn’t clear how to configure it at all. Webpack has been the de facto build tool for so long that at least there are plenty of resources for how to use it. I think Phoenix made the right move switching to esbuild, though. It will just take some time for the community to catch up.

2 Likes
8

I hope you’re right :pray: :pray: :pray: :upside_down_face:

9

I finally got a vue 3 prototype working with phoenix using esbuild. This is not complete, but may help as a starting point for anyone attempting to do so.

3 Likes
10

Esbuild sounds better than webpack, but I would love to see a implementation of Parcel bundler with Phoenix.