Add Vue.js to your Phoenix project's Webpack 1 config


In Replacing Brunch with Webpack 1 in Phoenix I showed you how to switch out brunch for webpack1.

It's trivial to update that to work with Vue and it's *.vue files.

A few tweaks

Make sure you have hte necessary dependencies in package.json:

  "vue": "^2.2.4",
  "vue-loader": "^11.1.4",
  "vue-template-compiler": "^2.2.4",

And then add to your webpack.config.js file:

  module: {
    loaders: [{
      test: /\.vue$/,
      loader: 'vue'
    // ...

  vue: {
    loaders: {
      js: 'babel!eslint'


That's all folks!