JavaScript Ruby Vue

既に動いてるRailsにVue.jsを導入する

2018年12月15日

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>

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

 

Pocket
LinkedIn にシェア

React入門者へおすすめ動画&書籍おすすめ!

フロントエンド入門者へおすすめ動画&書籍おすすめ!

  • この記事を書いた人

藤沢瞭介(Ryosuke Hujisawa)

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

-JavaScript, Ruby, Vue

Copyright© off.tokyo , 2021 All Rights Reserved Powered by AFFINGER5.