amiiby

RailsでVue.jsとBuefyを使う

  • Buefy
  • Bulma
  • Ruby
  • Ruby on Rails
  • Vue.js
  • Webpacker

ぬにょす(挨拶)。

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

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

Vue.js - The Progressive JavaScript Framework | Vue.js（jp.vuejs.org）

Vue.js - The Progressive JavaScript Framework | Vue.js（jp.vuejs.org）

Buefy: lightweight UI components for Vue.js based on Bulma（buefy.org）

Buefy: lightweight UI components for Vue.js based on Bulma（buefy.org）

では参りましょう。

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

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

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

GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails · GitHub（github.com）

GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails · GitHub（github.com）

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

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

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

# 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

YarnでBuefyをインストール

$ bundle exec yarn add buefy

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)
// ここまで

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

$ bundle exec rails g controller Page index

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

<%# app/views/page/index.html.erb %>
Page#index
Find me in app/views/page/index.html.erb
<%= javascript_pack_tag 'hello_vue' %>

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

動作確認

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

$ bundle exec rails s -b 0.0.0.0

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

記事の一覧へ