RailsにちょこっとVueを使いたい！

vueをぶちこむ

./bin/rails webpacker:install:vue

turbolinksをよしなに

yarn add vue-turbolinks

で追加

設定周り

app/javascript/packs/application.js

import './hello_vue.js'
import Vue from 'vue/dist/vue.esm'
import TurbolinksAdapter from 'vue-turbolinks'

Vue.use(TurbolinksAdapter)

app/javascript/packs/hello_vue.js のようなエントリーポイントはひとまず、

import Vue from 'vue/dist/vue.esm'
import Range from './components/range.vue'

// document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('turbolinks:load', () => {
  new Vue({
    el: 'range',
    components: { Range },
  })
})

と思ったら、これだとvueのコンポーネントにしたい部分がみつからないと毎回エラーがでちゃうので、

  document.querySelectorAll('.vue-component').forEach((el) => {
    new Vue({
      el: el,
      components: { Range },
    })
  });

こうしました。

vue

なんかdata の中身data: functionだった

<script defer>
  export default {
    data: function () {
      return {
        selectPoint: 0
      }
    },
  }
</script>

haml

%range

ref

https://teratail.com/questions/280111

https://count0.org/2018/02/05/vue-into-rails.html https://qiita.com/rhistoba/items/a06f60a509e87604164e https://qiita.com/kuroda@github/items/940338b5f6f46da2c5f1 https://note.com/campfire_dev/n/n1686059962b5 https://qiita.com/tatsurou313/items/4f18c0d4d231e2fb55f4