search
LoginSignup
21

More than 3 years have passed since last update.

posted at

updated at

Rails+WebpackerでVue.jsとTurbolinksを同時に動かす

これは何

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を使えるようにするのか

  1. Railsアクションからビューをレンダリング
  2. turbolinks:load時にビューからVueインスンタンスのid要素を検索
  3. id要素が見つかればVueインスタンスを生成
  4. ビューのid要素以下をテンプレートとしてVueインスタンスが適用される

こんな感じで、ビューでidを指定した箇所にVueを適用するための方法を説明します。
部分的にVueを適用可能なので、いわゆる薄い使い方によりRails Wayから外れない開発が可能かと思います。

手順

今回は適当にrails newしてルートのビューだけ作成したRailsプロジェクトを対象に説明します。

Webpackerを導入

GemfileにWebpackerを追加。

Gemfile
# ...
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に以下を追加する。

javascript/packs/application.js
import Turbolinks from 'turbolinks'

Turbolinks.start()

views/layouts/application.html.erbで以下の一文を追加する。

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/webpackcustom.jsを作成します。

config/webpack/custom.js
module.exports = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}

config/webpack/environment.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を以下の内容で作成します。

main.js
import Vue from 'vue'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(TurbolinksAdapter)

実際に使う

準備ができたので、実際にVueインスタンスを作成して動かします。

適当なビュー(今回はviews/home/index.html.erb)でVueインスタンスで使われるid要素を追加して、その要素以下でVueのテンプレート表記でhtmlを記述します。

views/home/index.html.erb
<div id="vue-app">
  {{message}}
</div>

javascripts/src以下にVueインスタンス作成のファイルを書きます。

javascripts/src/app.js
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するよう追記します。

javascripts/src/main.js
import Vue from 'vue'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(TurbolinksAdapter)

+ import './app.js'

rails sしてブラウザで以下のように確認できれば、完了です。

RailsVueTemplate.png

おしまい

RailsでのVueライフをごゆるりと…

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
21