첫 포스트입니다.

Rails에서 Bootstrap과 Vue.js를 사용하는 방법을 살펴보면,
Vue.js를 rails new project --webpack=vue로 넣고,
Bootstrap은 Gemfile에 gem 'bootstrap'그것이 전통적인 방식처럼

조금 번거롭고, 왠지 vu 파일의 template에 쓴 tooltip이 제대로 효과가 없었기 때문에, Bootstrap을 gem으로 넣지 않게 하고, yarn으로 BootstrapVue를 넣도록 해 보았다

BootstrapVue

친숙한 Bootstrap과 Vue.js가 합쳐진 것
공식 사이트

했던 일

프로젝트 작성 (webpack에서 vu도 설치)

$ rails new bootstrapvue_rails --webpack=vue

yarn으로 BootstrapVue 설치

$ cd bootstrapvue_rails
$ yarn add bootstrap-vue

화면을 준비하고 라우팅 해주세요.

$ rails g controller Home index

config/routes.rb

Rails.application.routes.draw do
  root to: 'home#index'
  # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html
end

화면 js 파일 만들기

app/javascript/packs/home.js

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

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)

document.addEventListener('DOMContentLoaded', () => {
  const app = new Vue({
    el: '#hello',
     data: {
      message: "Can you say hello?"
    },
    components: { App }
  })
})

vue 파일 만들기

app/javascript/app.vue

<template>
  <div id="app">
    <p>{{ message }}</p>
    <div class="text-center my-3">
      <b-button v-b-tooltip.hover title="Tooltip content">Hover Me</b-button>
    </div>
  </div>
</template>

<script>
export default {
  data: function () {
    return {
      message: "Hello Vue!"
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

view로 로드

app/views/home/index.html.erb

<h1>Home#index</h1>
<p>Find me in app/views/home/index.html.erb</p>

<div id='hello'>
  {{message}}
  <app></app>
</div>

<%= javascript_pack_tag 'home' %>

서버를 시작하면 tooltip이 작동합니다.

$ ./bin/webpack-dev-server
$ rails s