RailsでVue.jsとBuefyを使う

ぬにょす(挨拶)。

Ruby on Railsでなんか作ってみよー!と思い立ってから数日、環境面をいじくり回すだけでコーディングに着手できていない私です。
先日、Capistranoによるステージング環境への自動デプロイができたので、今度はフロントエンド開発に必要なJavaScript&CSSフレームワークを導入してみました。

そしてどうせなら触ったことないヤツを使ってみよう、ってことでVue.jsとBuefyに白羽の矢をぶっ刺した次第です。

Vue.js

Vue.js - The Progressive JavaScript Framework

Buefy: lightweight UI components for Vue.js based on Bulma

Buefy is a lightweight library of responsive UI components for Vue.js based on Bulma framework and design.

では参りましょう。

Railsプロジェクトの作成
WebpackerでVue.jsをインストール
YarnでBuefyをインストール
Hello Vue!
動作確認

Railsプロジェクトの作成

今まで通り rbenv+Bundler な環境でRailsプロジェクトを作成します。
流石にもうこの流れは身に付きました。

$ mkdir hello_vue
$ cd hello_vue
$ bundle init
※Gemfile を編集して gem 'rails' のコメントを外す
$ bundle install --path vendor/bundle --jobs=4
$ bundle exec rails new . -BT -d mysql --skip-coffee --skip-turbolinks
$ bundle install
Code language: plaintext (plaintext)

rails new のオプションはお好みで。

WebpackerでVue.jsをインストール

GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails

Use Webpack to manage app-like JavaScript modules in Rails - rails/webpacker

正直、WebpackerとWebpackの違いが分からないレベルで理解できてませんが…。

※Gemfile に gem 'webpacker', '~> 4.x' を追記
$ bundle install
$ bundle exec rails webpacker:install
$ bundle exec rails webpacker:install:vue
Code language: plaintext (plaintext)

インストールの過程で設定を追加する指示がコンソールに表示されるので従います。

# config/initializers/content_security_policy.rb
Rails.application.config.content_security_policy do |policy|
  if Rails.env.development?
    policy.connect_src :self, :https, "http://localhost:3035", "ws://localhost:3035"
    policy.script_src :self, :https, :unsafe_eval
  else
    policy.script_src :self, :https
  end
end
Code language: Ruby (ruby)

YarnでBuefyをインストール

$ bundle exec yarn add buefy
Code language: plaintext (plaintext)

node_modules以下に buefy と bulma ができるはずです。

Hello Vue!

app/javascript/packs/hello_vue.js を編集します。

import Vue from 'vue'
import App from '../app.vue'
// 追記ここから
import Buefy from 'buefy'
import 'buefy/dist/buefy.css'
Vue.use(Buefy)
// ここまで
Code language: JavaScript (javascript)

適当なコントローラーを作ります。

$ bundle exec rails g controller Page index
Code language: plaintext (plaintext)

テンプレートでhello_vueを読み込みます。

<%# app/views/page/index.html.erb %>
Page#index
Find me in app/views/page/index.html.erb
<%= javascript_pack_tag 'hello_vue'%>
Code language: ERB (Embedded Ruby) (erb)

その他、データベースの設定とかは良きに計らってちょ。

動作確認

rails s してブラウザでアクセス。

$ bundle exec rails s -b 0.0.0.0
Code language: plaintext (plaintext)

Vue.jsは動いているし、Buefy(Bulma)のCSSも適用されてるので良いんですが。
bin/webpack とか bin/webpack-dev-server あたりがよく分からず完全にスルーしちゃってるので、この辺はもうちょっと調べようと思います。