Railsアプリ内にVue.jsのエントリーポイントを複数作る方法

RailsにVue.jsを導入したい

モダンなUI/UXを実現するために、RailsアプリにVue.jsを導入してフロントエンドを整えるパターンが多くなっていると聞きます。

私もオリジナルアプリを作成する際、ランディングページだけでもモダンに仕上げたい！という思いと、純粋に流行っている技術を身に付けたいという思いで、かなり初歩的ではあるもののRailsにVue.jsを導入しました。

RailsへのVue導入方法

ここは他の方の記事で散々紹介されており、私があえて説明する必要もないかと思いますので、参考にさせていただいたリンクを載せるにとどめます。
(下記記事の方はRailsにDocker環境にてVue.jsを導入するという初学者からするとかなり助けになる内容を執筆されています。)
https://qiita.com/rh_taro/items/21bc9a98e501b8d7de71

Railsアプリ内でVue.jsのエントリーポイントを複数作る方法

ここからエントリーポイントを複数作る方法の説明に入ります。

Vueをrailsに導入するとapp/javascript下に/packs/hello_vue.jsとApp.vueファイルが生成されます。
この単一のvueであれば上記で紹介した記事を参考にしていただければ表示までできると思います。

では本題の2つめのエントリーポイントはどうやって作るの？の方法を説明していきます。

とは言っても、/packs/hello_vue.jsとApp.vueのような組み合わせを新たに作るだけです。

ここでは仮にdetailsというエントリーポイントを作る前提で、行うべきことを書いていきます。
まずはjavascriptファイルの作成です。

// details.js
import Vue from 'vue'
import App from '../details.vue'

document.addEventListener('DOMContentLoaded', () => {
  const el = document.body.appendChild(document.createElement('details'))
  const app = new Vue({
    el,
    render: h => h(App)
  })

  console.log(app)
})

続いてvueファイルの作成です。

<!--details.vue-->
<template>
  <div id="details">
  </div>
</template>

<script>
export default {
  name: 'Details',
}
</script>

<style scoped>
</style>

<!--必要最低限のコードのみ書いています-->

最後に上記Vueを表示するHTMLの作成です。

<%= javascript_pack_tag 'details' %>
<%= stylesheet_pack_tag 'details' %>

<div id="details"></div>

これで二つ目のエントリーポイントが完成です！

具体例というよりも方法にフォーカスした内容となっておりますので、実際のコンテンツの部分はご自身のものを当てはめていただければ良いと思います。

コメント、ご指摘等ございましたらご連絡お願いします。