guide, elixir, phoenix, vuejs, vue, es6, javascript

Add Vue.js to Elixir Phoenix

Vue.js "The Progressive JavaScript Framework" has been steadily gaining popularity over the past few years and has become a staple in UI development.

We're going to cover the basics of adding Vue.js to Elixir Phoenix and cover a few configuration steps along the way.

Overview

  • Install and configure Vue.js
  • Create a simple template
  • Mount the Vue component onto a Phoenix template

Create throwaway app

Create a new app and follow the usual installation steps:

$ mix phx.new vue
$ cd vue
$ mix ecto.create
$ mix phx.server

Installing packages

Let's start by installing the packages we'll need.  cd assets and

# use install on older versions of npm

$ npm add vue
$ npm add -D vue-loader vue-template-compiler babel-preset-vue

Configure Babel and Webpack

These are necessary steps if you want to load .vue files.

Open assets/.babelrc and add the vue preset:

{
  "presets": [
    "@babel/preset-env",
    "vue"
  ]
}

Open assets/webpack.config.js and require the loader plugin:

# ...
const CopyWebpackPlugin = require('copy-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin')

Add the module rule:

 module: {
    rules: [
      {   
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }   
      },   
      {   
        test: /\.vue$/,
        loader: 'vue-loader'
      }
	  # ...
    ]   
  },  

And  add the plugin:

  plugins: [
    new MiniCssExtractPlugin({ filename: '../css/[name].css' }), 
    new CopyWebpackPlugin([{ from: 'static/', to: '../' }]),
    new VueLoaderPlugin()
  ]

Create Template and Mount Vue.js

Open WEB_PATH/templates/page/index.html.eex , clear out everything and add a basic Vue app wrapper:

# templates/page/index.html.eex

<div id="app">
  {{ message }}
</div>

Next, open assets/js/app.js and add this code:

import Vue from 'vue/dist/vue.esm'

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
}) 

Start your server: mix phx.server and you should see the message printed out on the page.

Something important to note is that because we're compiling the Vue app from ES6, we need to import the esm (ES6 Module) version.  If you would like to alias this to make it easier to import vue in different files you can add this resolve property to webpack.config.js:

module.exports = (env, options) => ({ 
  # ...

  resolve: {                   
    alias: {                   
      'vue$': 'vue/dist/vue.esm.js'
    },                         
    extensions: ['*', '.js', '.vue', '.json']     
  },

  # ...

Now you can switch the import of Vue to:

import Vue from 'vue'

Conclusion

We've got a simple set up for getting starting with Vue.js in Phoenix and we're enjoying getting our feet wet with the library.

I hope you found this guide helpful and let me know if you have any questions or issues.

Follow us on twitter for updates: @phxroad

Author image

About Troy Martin

Husband, Father & Software Developer who tinkers with writing and building things.
  • Hamilton, ON