Rails6でBootstrapVueの導入

rails6でyarnを使用してプロジェクトを作ります。

この記事の特徴

• rails6
• vue.js
• slim
• BootstrapVue

まずはプロジェクトを作成します。

mkdir [プロジェクト名] && cd $_

railsとvue.jsとBootstrapVueとslimをインストールします。

rails new . -d postgresql --skip-turbolinks
rails db:create
echo 'gem "slim-rails"' >> Gemfile
echo 'gem "html2slim"' >> Gemfile
bundle
bundle exec erb2slim app/views/layouts/ --delete
rails webpacker:install:vue
yarn add jquery popper.js vue bootstrap-vue bootstrap
mkdir app/javascript/src
touch app/javascript/src/application.scss

app/javascript/src/application.scss

@import '~bootstrap';
@import '~bootstrap-vue';

app/javascript/packs/application.js

require("@rails/ujs").start()
require("@rails/activestorage").start()
require("channels")

import "../src/application.scss"

[コンソール]

rails g controller home index

app/javascript/packs/home.js

import Vue from 'vue/dist/vue.esm';
import BootstrapVue from 'bootstrap-vue';

Vue.use(BootstrapVue);

const app = new Vue({
    el: '#hello',
});

app/views/home/index.html.slim

#hello
  .text-center
    b-button variant="primary" 
      | Notifications
      b-badge variant="light"  4

.text-center
  b-button variant="primary"
    | Notifications                                                                                                                    
    b-badge variant="light"  4

= javascript_pack_tag "home"

上のNotificationsには反映されて、下のNotificationsには反映されません。

普通のBootstrapも動かす場合

app/javascript/packs/application.js

import "bootstrap"

を追記する。
以上です！快適なBootstrapライフを!

おまけ（全部ターミナルで終わらせたい方向け)

rails new . -d postgresql --skip-turbolinks
rails db:create
echo 'gem "slim-rails"' >> Gemfile
echo 'gem "html2slim"' >> Gemfile
bundle
bundle exec erb2slim app/views/layouts/ --delete
rails webpacker:install:vue
yarn add vue bootstrap-vue bootstrap jquery popper.js
mkdir app/javascript/src
touch app/javascript/src/application.scss
echo '@import "~bootstrap";' >> app/javascript/src/application.scss
echo '@import "~bootstrap-vue";' >> app/javascript/src/application.scss
echo 'import "bootstrap"' >> app/javascript/packs/application.js
echo 'import "../src/application.scss"' >> app/javascript/packs/application.js