環境

• Rails
  • Rails 5.1.0.rc2
• Ruby
  • ruby 2.4.0p0
• Vue.js
  • 2.0

Vue.jsの使い方

アプリケーション作成

1

$ rails new vuejs -d postgresql --webpack=vue

rails newに --webpackをつけたらアプリケーションが生成した時点でwebpackを使えるようになる。 app フォルダーの下に javascript フォルダーが生成されていて、その下には packs フォルダーが生成されている。そこのjsファイルとvueファイルを通して Vue.js を使うことができる。

コントローラー作成

使うコントローラーとビューを作る。このアプリケーションにはtodoリストを作成してみるのでコントローラー名は todos にする。

1

$ rails g controller todos index

routesに追加

1
2

root to: 'todos#index'
resources :todos, only: :index

js側

packs フォルダーに todo.js ファイルを作る。そして import Vue from 'vue/dist/vue.esm' を記入してVueをimportする。

ビュー側

1

= javascript_pack_tag 'todo'

‘Hello Vue!'の出力

Vue.js公式サイトの最初の方に出ている最も基本的な Hello Vue! を出力してみる。まず、todos/index.html.slim に object を出力する div を入れる。それからこのビューにjsから message というデータをバインティングする。

• ビュー

1
2

#app
  | {{ message }}

• js

1
2
3
4
5
6

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

参考

【動画付き】Rails 5.1で作るVue.jsアプリケーション ～Herokuデプロイからシステムテストまで～
Rails5.1.0 Beta1でVue.jsアプリケーションを作る
Vue.js_Guide