TojiTech No Programming, No Life.

# プロジェクトを作成 ( オプション類は、各個人でアレンジしてください)
rails new VueSampleApp --force --no-deps

# Webpackerでvueをインストール
rails webpacker:install:vue

# VueのルーティングにVueRouterを使うのでライブラリを追加
yarn add vue-router

# すべてのビューを集約するためのコントローラーとビューを作成
rails g controller homes index

# 使わないファイルを先に削除
rm app\javascript\packs\hello_vue.js

Rails.application.routes.draw do
  # トップページとして、すべてのVue Routerのページを集約する
  root 'homes#index'
  
  #
  # APIを記述する場合は、こちらに記述
  # 
  
  # これより上に記述されたルーティングがなければ、
  # すべてのパスをhomes#indexを受け取る
  get '*path', to: 'homes#index'
end

class HomesController < ApplicationController
  # Vue Routerのルーティングを使用するため何も処理しない
  def index; end
end

<template>
  <div>
    <!-- Vue Routerでの表示領域 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // ルート処理があればここに記述
  // 例えばナビゲーションメニューなど
}
</script>

<style scoped>
/* app.vueでのみ使う記述 (scope属性) */
</style>

<%# app/javascript/packs/main.jsを読み込み %>
<%= javascript_pack_tag 'main' %>

// Vueをインポート
import Vue from 'vue'
// ベースとなるテンプレートをインポート
import App from '../app.vue'
// ルーティングを指定しているスクリプトファイル
import router from '../router/index.js'

/*
    Vueに関連するものをインポートする場合は、以下に記述していきます
 */

// DOMの操作
document.addEventListener('DOMContentLoaded', () => {
    const app = new Vue({
        // ルーティングを読み込み
        router,
        // ベーステンプレートにレンダリングを指示
        render: h => h(App)
    }).$mount()
    // body以下に上記のレンダリング情報を展開
    document.body.appendChild(app.$el)
})

/*
  ディレクトリに作成すると自動でロードされる
  グローバルで使用するCSS類を記述します。
 */


// Google Fonts
@import url('https://fonts.googleapis.com/css2?family=Kiwi+Maru&display=swap');

* {
  font-family: 'Kiwi Maru', serif;
}

// Vueをインポート
import Vue from 'vue'
// VueRouterをインポート
import Router from 'vue-router'
// Vueで使用を宣言
Vue.use(Router)

// ページテンプレート
import top from '../templates/index'

// ルーティングを記述
const router =  new Router({
    // HTML5 History モード
    // ref : https://router.vuejs.org/ja/guide/essentials/history-mode.html
    mode: 'history',
    routes: [
        // ルートパスを記述
        {path: '/', name: 'top', component: top},
    ]
})

// routerをmain.jsに戻す
export default router

<template>
  <div>
    <h1>
      Hello World!
    </h1>
  </div>
</template>

<script>
export default {
  name: 'index'
}
</script>

<style scoped>

</style>