技術ネタ

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

参考

https://www.engineyard.com/blog/rails-and-vue-js-part-1

 

-技術ネタ

Copyright© off , 2020 All Rights Reserved Powered by AFFINGER5.