RailsプロジェクトへのVue.js導入

Rails × Vueのセットアップ

導入方法は以下の4つが考えられそうだが今回は1.で導入

1. デフォルトのRailsプロジェクトの中にVue.jsを導入
2. APIモードのRailsプロジェクトの中にVue.jsを導入
3. RailsコンテナとVueのコンテナに分けてコンテナ同士で接続
4. Rails用サーバーとVue用のサーバーでそれぞれ構築して、エンドポイントで接続

Gemfile

gem "webpacker"

# gemのインストール
bundle install
# webpackerインストール
bin/rails webpacker:install
# コンパイル
bin/webpack
# vueインストール
bin/rails webpacker:install:vue
# Top作成
rails g controller Home index --no-assets --no-helper --no-test-framework
# vue読み込み
sed -ie '10i \    <%= javascript_pack_tag "hello_vue" %>' app/views/layouts/application.html.erb

• routeの書き換え

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

• localhostにアクセスしてhello worldを確認
  • http://localhost:3000

雑感

何も開発していないのに最初から色々1つのプロジェクトにたくさん入っちゃっている感