RailsとVueをつかうとき（再録）

この記事は2019年07月05日 に公開した記事の内容を少しだけ更新してます

どうも

エンジニアになってかれこれ3年以上経ったというのに、 ろくにフレームワークを触ってこなかったツケを感じ始めたのでRailsの勉強を再開しました ExercismでRubyのコーディングも練習してるからちょうどいいし…

ただRailsをそのまま使うのもアレなので、せっかくだからBootstrapとVue.jsも使うことにしました 「rails vue」で検索して出てくる記事を見てると、最近はwebpackerに頼らないようにするものらしいが、よくわかってないとこなので普通にwebpacker使います

で、そんな中知識不足によりハマって苦しんだので忘れないうちに残しとく

環境

$ ruby -v
ruby 2.5.3p105 (2018-10-18 revision 65156) [x86_64-darwin18]
$ rails -v
Rails 5.2.3
$ node -v
v12.5.0

単一ファイルコンポーネントのHello Vueを表示するまで

  1. Railsプロジェクトの生成
$ rails new test --webpack=vue

  1. bundle installを実行

  2. Viewの生成

rails g controller Home index
  1. Vueインスタンスの生成方法を変える

rails newしたときに作られるjavascript/packs/hello_vue.jsはデフォルトで以下になっている

import Vue from 'vue'
import App from '../app.vue'

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    render: h => h(App)
  }).$mount()
  document.body.appendChild(app.$el)
  console.log(app)
})

上記のコードはVueインスタンスを作成・mountしてできたDOMをappendChildで追加している
このコードの後に、以下のようなコメントが記載されている

// The above code uses Vue without the compiler, which means you cannot
// use Vue to target elements in your existing html templates. You would
// need to always use single file components.
// To be able to target elements in your existing html/erb templates,
// comment out the above code and uncomment the below
// Add <%= javascript_pack_tag 'hello_vue' %> to your layout
// Then add this markup to your html template:
//
// <div id='hello'>
//   {{message}}
//   <app></app>
// </div>

ということで、これにならって上記のコードをコメントアウトして、 このコメントの下にあるjsコードのコメントを外す

import Vue from 'vue/dist/vue.esm'
import App from '../app.vue'
document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello',
    data: {
      message: "Can you say hello?"
    },
    components: { App }
  })
})
  1. Viewで（views/home/index.html.erb）Vue Componentを呼ぶ
<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<!-- 以下を追加 -->
<%= javascript_pack_tag 'hello_vue' %>

だけじゃなくて、4の作業でHTMLテンプレートが使えるようになったので、レンダリング先も加える

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<!-- 以下を追加 -->
<div id='hello'>
  {{message}}
  <app></app>
</div>

<%= javascript_pack_tag 'hello_vue' %>
  1. ルーティングの設定（config/routes.rb） ルートURLをHomeのindex.html.erbにする
Rails.application.routes.draw do
root to: 'home#index'
# For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end
  1. webpack-dev-serverを起動
$ ./bin/webpack-dev-server
  1. rails serverを起動
$ rails s

http://localhost:3000にアクセスするとVue Componentの内容が表示されることが確認できますz

sample