既に動いてる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>

参考(とりえずこの本読めば詳しいところわかると思う)

 

藤沢瞭介(Ryosuke Hujisawa)
  • りょすけと申します。18歳からプログラミングをはじめ、今はフロントエンドでReactを書いたり、AIの勉強を頑張っています。off.tokyoでは、ハイテクやガジェット、それからプログラミングに関する情報まで、エンジニアに役立つ情報を日々発信しています!

JavaScriptRubyVue

コメントする