Vue.js - General Discussion, Blog Posts, Wiki

General Prog (Archived)
,
3

This can be found elsewhere, but because it’s so important it’s worth repeating here.

Vuejs single file components don’t work very well with Brunch (the default asset compiler that comes with Phoenix). You’ll get an error each time you try to import a module from inside the .vue file Webpack, despite its shortcomings, has excellent support for Vuejs components, so if you want to use them, you should switch to Webpack.

To use webpack with Phoenix with support for .vue files (single file components):

  1. Clone your this github repo: https://github.com/straw-hat-llc/phoenix_assets_webpack into your Phoenix project, and rename it to assets/. This will be your new assets/ directory. This directory adds support for Webpack.
  2. Change the config/dev.exs to use the webpack compiler instead of brunch, according to the instructions here: https://github.com/straw-hat-llc/phoenix_assets_webpack#setup
  3. Finally, add a vue loader to the rules in your webpack.config.js. For example:
{
    test: /\.vue$/,
    loader: 'vue-loader'
}
7 Likes