PhoenixでbrunchのままVueを使う

Vueといえばwebpackというイメージだが、Phoenixを使うと最初からbrunchが入っている。
webpackを使うこともできるが色々と設定するのも面倒なので、簡単にbrunchのまま使うための方法。

ちなみに下記で紹介されている方法と同じ。

Phoenix, Brunch and VueJS: Part 2 - Baroni Tech

とりあえずVueをインストール

npm install vue

そしてbrunchで使えるようにするためのライブラリもインストール。
両方無いと動かない。

npm install --save-dev babel-plugin-transform-runtime vue2-brunch

サンプルのGithubのbrunch-config.jsを見てみると、下記のようになっているので追記。
(aliasesを追記)

  npm: {
    enabled: true,
    aliases: {
      'vue': 'vue/dist/vue.common.js'
    }
  }

あとは元々あったapp.jsに下記を追記するだけでもう動く。

import 'vueify/lib/insert-css'
import Vue from 'vue'
import Hello from './components/hello.vue'

new Vue({ 
  el: '#container',
  components: { Hello }
});

上記であればhtml上のid=container要素内のhelloタグがあれば動作する。
勝手にcontainer内が全部置きかわってしまったりなどはしないので、
一部だけ実装したいとかでも可能。
非常に簡単で便利。