Rails4へのVue.js導入におけるつまづきを解決する方法

Vue.jsはエコで速くて親しみやすいため最近かなり注目されている、webアプリのUI構築のためのJavaScriptフレームワークである。

すでに結構開発済みのRails4にRails4を導入しようと思ったら結構つまづいた。

念の為、導入時の詳細を自分用に記録に残しておく。

Vue.js導入

Gemfileに以下を追加してbundle install

gem "webpacker", github: "rails/webpacker"

bundle exec rake webpacker:install

すると、

Yarn not installed. Please download and install Yarn from https://yarnpkg.com/lang/en/docs/install/

とyarnをインストールする必要があると言われるので、素直にインストールする。

$ brew install yarn

からの

bundle exec rake webpacker:install

でwebpackerのインストール成功。

be rake webpacker:install:vue

application.html.erbの</head>上に以下のコードを書く。

<%= javascript_pack_tag "hello_vue" %>

javascript/packs/hello_vue.jsを編集する。

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

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#success',
    data: {
      message: "rails"
    },
    components: { App }
  })
})

表示したいviewで以下のコードを記述。

   <div id='success'>
    {{message}}
    <app></app>
   </div>

以下のコマンドでvue.jsをコンパイルする。

bin/webpack-dev-server

するとエラー。

undefined method `javascript_pack_tag'

rails sを再起動すると以下のように表示できた。

ということでVue.jsでRailsのUI改善やっていきたい