Phoenix with: a JSON API and Vue.js, or, HTML (eex) with partial use of Vue?

I am seeing that using Vue.js within Pheonix HTML files can be better, since Phoenix keeps taking care of routing and there is no need to run two servers, one for backend and another for front end.

It depends on what you want to build…

If you build a simple webapp with some simple forms and static sites, you are better off using Phoenix html…

If you build a highly interactive single page application and you might want to add other clients later (for example a mobile app) I would recommend to build the front end completely with Vue.js.

Let’s say that I need to render some html element conditionally if the currently logged in user has a particular role. How could VueJS access that information inside its templates and render accordingly ? In Phoenix HTML, that’s easy but how to do that in a complete VueJS build with a Phoenix JSON API backend?

When You are completely separating frontend from backend, it is usually nice to use a state manager that will hold the state of your UI. In your case, storing user and maybe roles.

This can be done by Redux, or Vuex if You use Vue. Or by any similar tools…

Here is a blogpost that compares both…

I’m curious too. No answer for this?

@hlx and I are using a different approach, also using Vue and Elixir. We’re running a Elixir server with a GraphQL endpoint using Absinthe, which allows for a lot of flexibility and is quite nice to work with. Alongside that, we’re deploying our Vue application as a static web app to Netlify which is also incredibly easy to do.

GraphQL allows you to query multiple resources in one HTTP request, which might end up getting better performance for your users.

What part specifically? It’s highly dependent on what you’re doing. There’s plenty of ways to communicate with the back-end, either by implementing router solutions for your front-end, making ajax calls, using libraries that handle that, etc.

That’s a game I’m developing (it’s fairly more developed now than when that video went up). All the logic is processed in the server, which then serves the state through Phoenix Channels, on the front-end it’s a Vue application, that hooks to the “game” channel the user is playing and to a particular “user” channel just for him.

From the state that I pass from the server I bind information to each user’s Vue instance, which then is used on the component to draw the gameboard. Users only emit certain messages to the server, such as “pass”, “cast” (with the additional info of what they chose), “strike” (again with the relevant info), the server processes those calls, checks for legality, and if everything lines up correctly broadcasts a new state, which the vue instance receives through the form of a event listener, and re-binds the information to it’s relevant variables, from which the component again redraws the gameboard.

The “game lobby” parts is also composed of a vue instance, with two components, a “list” of games (open, closed, etc, that gets refreshed through a broadcast from the back-end whenever there are changes), and a component to “create/open” a new game and wait opponents. Then the same logic, when someone joins a game, the back-end processes that, and fires a broadcast which is interpreted in the vue part of the front-end and reflected on the page.

Here I am answering my own question

I have gained in the meantime some experience in VueJS. Any use of VueJS inside Phoenix means creating JSON API endpoints, so the best solution is to create a pure JSON/API Phoenix application and use VueJS for the UI (front-end).

VueJS is simply amazing. I have already created some friendly UI using VueJS with log-in, pagination, routes, filters etc.

Hi, thank you for your reply. Your game looked so smooth!

I want to dynamically adding element like when using Jquery but this time using Vuejs. But after seeing author’s latest answer I think it’s impossible.

@herdibintang you are welcome to share what you want to achieve using jQuery (the code) and get feedback as to if the same can be done in VueJS.