Ruby on Rails で Vue.js を使う方法
参考：
Vue.js と Rails で TODO アプリのチュートリアルみたいなものを作ってみた – Qiita
Vue.js と Rails で TODO アプリのチュートリアルみたいなものを作ってみた | RE:ENGINES
Rails 5.1 + Vue.js で開発を行う 環境構築 – Qiita
動画付き Rails 5.1 で作る Vue.js アプリケーション ～Heroku デプロイからシステムテストまで～ – Qiita
Ruby on Rails で API を叩いて Vue.js で表示するまで | indies.band
Rails に Vue.js を小さく導入する | count0.org
Rails 5.1, Vue.js で動かしてみる | もふもふ技術部
Rails と Vue.js で Web サービスの環境を作ってみた – Qiita
Rails 5.1 + Vue で何か作る前の基礎勉強 – Qiita
Webpacker を使った Rails での JavaScript 開発 | クックパッド開発者ブログ
TODO アプリにサーバーサイドを追加してみる | RE:ENGINES
Rails で Vue.js の SFC (単一ファイルコンポーネント) を使うために Webpack を入れてみた | SMARTCAMP Engineer Blog
Vue.js on Ruby on Rails (slides) | joker1007
Using Rails and Vue JS, Part 1 | Engine Yard
Vue.js Components in Rails Views | GoRails
Vue.js
- モダンブラウザをサポート
- IE は 9 以降をサポート (IE 8 以下はサポートしていない)
参考：
Webpacker
Requirements
- Ruby 2.2+
- Rails 4.2+
- Node.js 6.14.4+
- Yarn 1.x+
参考：
rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails – GitHub
新しいプロジェクトを作成する
$ rails new my_app --webpack=vue
既存のプロジェクトに追加する
Gemfile に gem を追加する。
gem "webpacker", "~> 3.5"
Bundler でインストールする。
$ bundle install
Webpacker をインストールする。
$ rails webpacker:install
Vue.js をインストールする。
$ rails webpacker:install:vue
webpack-dev-server を実行する。
$ bin/webpack-dev-server
vuejs-rails
参考：
adambutler/vuejs-rails: A simple asset-pipeline wrapper for Vue.js by Evan You – GitHub
タグをビューで生成する
プロパティを to_json でエスケープする。
<%= content_tag :div,
id: "hello-vue",
data: {
message: "Hello!",
name: "David"
}.to_json do %>
<% end %>
data 属性を JSON.parse で読み込んで、Vue インスタンスを生成する際に props として渡す。
document.addEventListener('DOMContentLoaded', () => {
// Get the properties before the app is instantiated
const node = document.getElementById('hello-vue')
const props = JSON.parse(node.getAttribute('data'))
// Render component with props
new Vue({
render: h => h(App, { props })
}).$mount('#hello-vue');
})
参考：
webpacker/props.md at 3-x-stable · rails/webpacker – GitHub
csrfToken
rails-ujs パッケージを追加する。
$ yarn add rails-ujs
axios を使う場合、リクエストヘッダーに CSRF トークンをセットする。
import { csrfToken } from 'rails-ujs'
axios.defaults.headers.common['X-CSRF-Token'] = csrfToken()
参考：
Vue.js と Rails の最適な融合を考える | メドピア開発者ブログ
extractCSS
参考：
Rails 5.1, webpack4, webpacker による vue.js の導入時に vue-loader の css に関する plugin がエラーを起こす対処 – Qiita
ESLint
参考：
Rails + webpacker + Vue.js プロジェクトに ESLint を導入 – Qiita
Tips
参考：