【Rails+Vue】プロジェクト作成

プロジェクト作成

初めからプロジェクトを作る場合

% rails new todo_sample --webpack=vue

Railsアプリに途中からVueを導入する場合

% bin/rails webpacker:install

% bin/rails webpacker:install:vue

開発環境サーバーの設定

foremanでrails serverとwebpack-dev-serverの起動を一つのコマンドで実行する

gem 'foreman'

プロジェクトのルートに設定用のProcfileを作成

# Procfile
rails: bundle exec rails s -p 3000
webpack: ./bin/webpack-dev-server

サーバーを起動

% bundle exec foreman start

erbでjavascriptを読み込む

SPAでは基本的にgetリクエストによって画面遷移することはない。単一のページをレンダリングし、その上でjavascriptによって描画される。

home#indexの設定

すべてのgetリクエストでviews/home/index.html.erbがレンダリングされるよう設定する。

class HomeController < ApplicationController
  def index; end
end

# routes.rb
Rails.application.routes.draw do
  get '*path', to: 'home#index'  # リロード時にもindex.html.erbがレンダリングされるための記述
  root 'home#index'
end

hello_vueの読み込み

app/javascript/packsにhello_vue.js （Vueインスタンスを生成するロジック）が生成される。
home/index.html.erb内で読み込む。

<!-- views/home/index.html.erb -->
<%= javascript_pack_tag 'hello_vue' %>