Ruby on Rails で Vue.js を使う方法

参考:

Vue.js と Rails で TODO アプリのチュートリアルみたいなものを作ってみた – Qiita

Vue.js と Rails で TODO アプリのチュートリアルみたいなものを作ってみた | RE:ENGINES

Rails 5.1 + Vue.js で開発を行う 環境構築 – Qiita

Rails と 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 以下はサポートしていない)

参考:

vuejs/vue: A progressive, incrementally-adoptable JavaScript framework for building UI on the web – GitHub

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

参考:

Vue.js と Rails の最適な融合を考える | メドピア開発者ブログ

タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です