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

Followup

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'
    }
  }

Conclusion

That's all folks!