環境
ruby on rails6
vue.js(webpacker)
問題
rails(erbテンプレート)内でvueのコンポーネントを利用する際、<%= javascript_pack_tag 'app' %>
という記載を行う必要があると思います。そのためにはapp/javascript/packs配下にapp.jsというファイルを作成し
//app/javascript/packs/app.js import App from '../layouts/app.vue' document.addEventListener('DOMContentLoaded', () => { const app = new Vue({ render: h => h(App) }).$mount() document.body.appendChild(app.$el) })
という形でコンポーネントファイルを読み込んだjsファイルでvueのインスタンスを生成しなければならないと思います。
これは裏返すと、app2.vueというコンポーネントをerb上で表示したい場合は、またapp2.jsというファイルを作り、
//app/javascript/packs/app2.js import App2 from '../layouts/app2.vue document.addEventListener('DOMContentLoaded', () => { const app2 = new Vue({ render: h => h(App2) }).$mount() document.body.appendChild(app2.$el) })
と、記載する必要があると思います。
このように、erb上で表示したいコンポーネント毎にjsファイルを作成しインスタンスを生成するコードを記載しなければならないのでしょうか?
知りたいこと
この前提の上で、
何かこのvueのインスタンス生成する上で一つのファイルにまとめたり、もしくは一度の記載で済む良い方法はないのでしょうか?
というよりそもそも複数ファイル作り、複数のインスタンスを生成するものなのでしょうか?(あまりそのようなサンプルを見たことがなく。。。)
erbで表示する分jsファイルを生成するのがかなりいけてなく思えた為、質問しました。
ご回答よろしくお願いします。
あなたの回答
tips
プレビュー