Rails, Vue.js で単一ファイルコンポーネントを使用したいときの設定ファイルの書き方

Question

何に困っているか

既存のRailsアプリにVue.jsを導入し、単一ファイルコンポーネントで一部のパーツをVue.jsのテンプレートで作成したいと思っています。

何とか動くようにはなったのですが、設定ファイルが非効率な書き方になっているので直したいと思っています。社内にVue.jsの知見のある人がおらず、調べても見つかりませんでしたので、何卒宜しくお願い致します。

前提条件・実行環境

• Rails 5.2.4.2
• Vue.js 3.0.1

rails new 時に　webpacker は導入していますが、Vue.jsは導入していません。

rails new app_name --skip-coffee --skip-turbolinks --webpack

Vue.js は後から./bin/rails webpacker:install:vueで導入しています。

作成したファイル

レイアウトファイルに以下のコードを記述しています。

# vews/layout/application.thml.haml
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'

コンポーネントはこのような形でviewに埋め込んでいます。（今回はトップに戻るボタンのコンポーネントなので、scroll_top_btn.vueというファイルを作成しています。）

# viewファイル
%scroll-top-btn

.vueのテンプレートファイルは、一度hello_vue.jsにまとめて、application.jsに読み込んでいます。

// javascript/packs/hello_vue.js

import Vue from 'vue/dist/vue.esm'
import ScrollTopBtn from '../components/scroll_top_btn.vue'

document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: 'scroll-top-btn',
    components: { ScrollTopBtn }
  })
})

// javascript/packs/application.js
import './hello_vue.js'

問題点

悩んでいるのは、このhello_vue.jsの記載方法で、

// javascript/packs/hello_vue.js
document.addEventListener('DOMContentLoaded', () => {
  new Vue({
    el: 'scroll-top-btn',
    components: { ScrollTopBtn }
  })
})

この書き方だと、コンポーネントが増えるたびに都度new Vue()をhello_vue.js内に記載しないといけなくなってしまいます。何とか、もっとスマートに描く方法はありませんでしょうか？

ちなみに、単一ファイルコンポーネント内はこのようになっております。

// javascript/componemts/scroll_top_btn.vue
<template>
  <div class="scroll-top-btn">
    <img 
      src="/img/btn_img.svg"
      @click="scrollTop" />
  </div>
</template>

<script defer>
  export default {
    methods: {
      scrollTop: function() {
        // 処理
      }
    }
  }
</script>

どうぞよろしくお願いいたします。

Answer 1

まだすっきりしないところがありますが、これで一段落させることにしました。
これなら、コンポーネントが増えても一行増えるだけ＆＆複数のコンポーネントも動作したので…。

これからも、研究・精進いたします。

# viewファイル
%scroll-top-btn.vue-component 　#← こんな感じのクラス名を各コンポーネントにつける

// javascript/packs/hello_vue.js

import Vue from 'vue/dist/vue.esm'
import ScrollTopBtn from '../components/scroll_top_btn.vue'

Vue.component('ScrollTopBtn', ScrollTopBtn);

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