I don’t. If I’m using the cli I use it standalone. The vue cli doesn’t do a good job integrating with existing frameworks, I believe this is an oversight and it will be resolved but it doesn’t seem to be a priority. There are some open issues and ongoing discussions around this. I have a hard time accepting the whole “Just output the index.html file where your backend app will server it” There are many cases where people don’t want to replace the entire rendered page with vue. I love vue as a frontend framework because you can use it in many different forms. From adding it from the cdn and sprinkle in some components all the way to full SPA. The vue-cli really pushes towards SPA. Now that phoenix uses webpack adding vue (and using single file components) is as easy as adding the vue loader.

It’s actually fairly straight forward!

cd assets && npm install --save-dev vue-loader

Update the webpack.config.js

...
{
  test: /\.vue$/,
    use: {
      loader: 'vue-loader'
    }
  },
...

In your app.js

import Vue from 'vue'
import App from './src/App.vue'

new Vue({
  el: '#app',
  render: (h) => h(App)
})

Any page you want to render vue just add the appropriate tag:

For example myapp_web/templates/page/index.html.eex

<div id="app"></div>

At this point nothing stops you from installing and using the vue-router or vuex. Customize and use at will.

No. With that setup Phoenix doesn’t serve any of the Vue app’s asset’s - it strictly functions as an independent JSON server.

I had a Vue example for Phoenix 1.3 using the app.html.eex but the consensus seems to be to keep Phoenix/Vue separate so that using Nuxt.js remains an option.

For React there is elixir_react_render

but there is nothing like that for Vue yet.

Some “Phoenix as a JSON API server” resources:

• Building a JSON API in Elixir with Phoenix 1.4
• Mix Tasks: mix phx.gen.json
• Phoenix Views: Rendering JSON

Harvested from:

I don’t know if this is going to be useful to you. But I will try anyway :D.

I have some experience using Vue and Phoenix. I chose Vue for the same reason that it will be easier to convert to a mobile app at some point. say using Nativescript. . I am also not a fan of Javascript, so I use Vue with Typescript, which works amazingly well.

Now coming to development, I am a fan of separating frontend from backend. This allows independent development of both and facilitates decoupling. Deploying Vue with Phoenix is easy. I just compile Vue to a single JS file and serve it using Nginx. So my index page shows Vue app. Vue calls into Phoenix using /api url. All calls to /api is redirected by nginx to my Phoenix listening on say port 4000. When combined with Docker, the deployment is also very pleasant. In case you are interested you can also check out my blog post for more info. Have a nice day