Ruby on Rails + Vue.jsで環境構築

Railsのバージョンを指定して新規プロジェクトを立ち上げ

今回はRails6でプロジェクトを立ち上げるため、バージョンを指定してrails newします。
(Rubyのバージョンは2.7.2です。)
Vue.jsを使用するために--webpack=vueオプションを追加します。

$ rails _6.0.0_ new sample --webpack=vue

Vue2系を使えるように設定

先ほどのコマンドではVue3系が入ってしまうため、package.jsonを編集して2系を手動で入れる。

package.json

+ "vue": "^2.6.14",
+ "vue-loader": "^15.7.0",
+ "vue-template-compiler": "^2.6.12" 
- "vue": "^3.2.33",
- "vue-loader": "^17.0.0",
- "vue-template-compiler": "^2.6.14"

変更後、yarn install

$ yarn install

トップページにHello Vue!を表示させる

home_controller.rbを新規作成します。

app/controllers/home_controller.rb

class HomeController < ApplicationController
  def index
  end
end

次に、routes.rbを編集しhome#indexをrootに設定します。

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
end

最後に、Webpackerを使用してJSを読み込むためにindex.html.erbを新規作成します。

sample/app/views/home/index.html.erb

<%= javascript_pack_tag 'hello_vue' %>

表示を確認するためにrails sでアプリケーションサーバを起動します。

$ rails s

localhost:3000にアクセスし、Hello Vue!が表示されていれば終了です。