既に動いてるRailsにVue.jsを導入する
webpackerをgemに追加
gem 'webpacker'
導入開始
$ bundle install
$ bundle exec rails webpacker:install
Vue.jsを使う
$ bundle exec rails webpacker:install:vue
app/javascript/packs/hello_vue.jsを下記のコードに書き換える
import Vue from 'vue/dist/vue.esm'
document.addEventListener('DOMContentLoaded', () => {
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
})
app/views/layouts/application.html.erbのheadに下記を追加
<%= javascript_pack_tag 'hello_vue' %>
app/views/pages/welcome.html.erbにVueを書く
<div id="app">
{{ message }}
</div>
すると下記のように出力されます。
Hello Vue!
これでもいいけど
<%= javascript_pack_tag 'hello_vue' %>
<div id="app">
{{ message }}
</div>
参考(とりえずこの本読めば詳しいところわかると思う)