これは何
RailsでVue.jsとTurbolinks動かしていい感じのフロントエンド環境を構築しよう！！！
一応それぞれのざっくりとした説明。
- Rails
- みんな大好きWebフレームワーク
- Webpacker
- Railsで書いたJSやCSSをよしなにまとめてくれるやつ
- Vue.js
- 言わずと知れたJSのフロントエンドフレームワーク
- Turbolinks
- ページ移動を速くしてくれるやつ
リポジトリとバージョン情報
リポジトリ: https://github.com/rhistoba/rails_vuejs_turbolinks_template
- Ruby: 2.6.3
- Rails: 5.2.3
- Webpacker: 4.0.7
- Vue.js: 2.6.10
- Turbolinks: 5.2.0
どういう感じにVue.jsを使えるようにするのか
- Railsアクションからビューをレンダリング
-
turbolinks:load時にビューからVueインスンタンスのid要素を検索 - id要素が見つかればVueインスタンスを生成
- ビューのid要素以下をテンプレートとしてVueインスタンスが適用される
こんな感じで、ビューでidを指定した箇所にVueを適用するための方法を説明します。
部分的にVueを適用可能なので、いわゆる薄い使い方によりRails Wayから外れない開発が可能かと思います。
手順
今回は適当にrails newしてルートのビューだけ作成したRailsプロジェクトを対象に説明します。
Webpackerを導入
GemfileにWebpackerを追加。
# ...
gem 'webpacker', '~> 4.x'
# ...
追加したらbundle install。
$ bundle install
以下のコマンドでプロジェクトにWebpackerをインストールする。
$ bundle exec rails webpacker:install
Vue.jsを導入
以下のコマンドでプロジェクトにVue.jsを追加する。
$ bundle exec rails webpacker:install:vue
Turbolinksなどの導入
yarnで以下のようにパッケージを取得する。
$ yarn add turbolinks vue-turbolinks
javascript/packs/application.jsに以下を追加する。
import Turbolinks from 'turbolinks'
Turbolinks.start()
views/layouts/application.html.erbで以下の一文を追加する。
<!DOCTYPE html>
<html>
<head>
...
+ <%= javascript_pack_tag 'application' %>
</head>
...
</html>
これでWebpackerによりjavascripts/packs/application.jsがビルドされるようになる。
Vue.jsで完全ビルドを有効にする
ビューから取得したid要素のhtmlを、Vueインスタンスにテンプレートとして渡してコンパイルされる必要があるのですが、Vueは標準でランタイム限定ビルドのみ有効になっており、このままでは意図通りに動かせません。
参考: https://jp.vuejs.org/v2/guide/installation.html#さまざまなビルドについて
そのため参考URLのページにも載っているように、Webpackの設定で完全ビルドを有効にします。
config/webpackにcustom.jsを作成します。
module.exports = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
config/webpack/environment.jsにて上記の設定を取り込むようにします。
// ...
const customConfig = require('./custom')
environment.config.merge(customConfig)
module.exports = environment
これでVueの完全ビルドが有効になります。
src/main.jsを作成
javascripts/packs/application.jsで各種Vueインスタンスを読み込む大元のファイルを作成しましょう。
javascripts以下にsrcディレクトリを作成します。
mkdir javascripts/src
javascripts/src以下にmain.jsを以下の内容で作成します。
import Vue from 'vue'
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)
実際に使う
準備ができたので、実際にVueインスタンスを作成して動かします。
適当なビュー（今回はviews/home/index.html.erb）でVueインスタンスで使われるid要素を追加して、その要素以下でVueのテンプレート表記でhtmlを記述します。
<div id="vue-app">
{{message}}
</div>
javascripts/src以下にVueインスタンス作成のファイルを書きます。
import Vue from 'vue'
document.addEventListener('turbolinks:load', () => {
const el = document.getElementById('vue-app')
if (el) {
new Vue({
el: el,
data() {
return {
message: 'Hello Vue!'
}
}
})
}
})
最後にjavascripts/src/main.jsで上記のファイルをimportするよう追記します。
import Vue from 'vue'
import TurbolinksAdapter from 'vue-turbolinks'
Vue.use(TurbolinksAdapter)
+ import './app.js'
rails sしてブラウザで以下のように確認できれば、完了です。
おしまい
RailsでのVueライフをごゆるりと…