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
参考: