Vue RouterとRails

RailsでVue Routerを実装してみました。

• app/javacript/app.vue

<script>
import { defineComponent } from 'vue'
import RouterVue from './components/Router.vue'

export default defineComponent({
  name: 'App',
  setup() {
      return {
          state: {
              message: "アプリを構築中"
          }
      }
  },
  components: {
      RouterVue
  }
})
</script>

• app/javacript/components/Router.vue

<template>
  <div>
    <router-link to="/reservations" class="btn btn-primary mx-2">
      予約フォーム
    </router-link>
  </div>
</template>

• app/javacript/router.js

import { createRouter, createWebHistory } from 'vue-router'
import ReservationForm from './components/reservatiopns/ReservationForm.vue'

const routes = [
  { path: '/reservations', name: 'index', component: ReservationForm },
  // Add more routes as needed
]

const router = createRouter({
  history: createWebHistory(),
  routes,
})

export default router