I can add a bit to that.
I’ve now used this combo (Phoenix, GraphQL, and Nuxt) on three different occasions, with Edgewise (https://edgewiserealty.com) being the most recent.
In this setup, Phoenix is mostly headless. It handles the GraphQL endpoint, as well as a socket endpoint. My router.ex
is pretty bare bones Additionally, it has its own GitHub repo, and deployed to its own servers, etc… Currently working on adding Apollo Engine into the mix as well.
Nuxt is essentially an opinionated layer on top of Vue, that handles server-side rendering; as well as other Webpack boilerplate. It runs in Nodejs on the server, renders the Vue app, then passes the static html to the browser. This is great for SEO (among many other reasons). Once Nuxt loads in the browser, it “hydrates” the static HTML. From there, the app functions like an SPA, using pushstate for routing. Upon a page refresh, the process starts all over again.
Nuxt is running on its own server, also using Docker containers, with its own GitHub repo. As is another app (“service” is if you prefer) that handles file caching and image processing. Again, with its own repo.
For me personally, I prefer the separation of concerns here. I personally feel Vue is a much better “templating” language to work in than eex
, and it’s a no-brainer when you start introducing functionality that requires JS. The whole “some of my HTML is eex and some of it is in Vue/React/Angular” is just silly IMO.
I also prefer Vue over React and Angular, for what it’s worth. I personally can’t stand JSX. Vue’s single file components are great. As are directives, as are scopes. It’s more inline with web standards in that regard. It’s also very “progressive” in that you can sprinkle it around on small apps (almost to the point where you can use it the way many use jQuery). You can run it side-by-side older apps (the first time I used Vue, it was intermixed with Backbone.js), and of-course, it can scale to a full-blown state management (Vuex) SPA.