はじめに

laravel sailを使ってlaravel10 + vue3.js + postgresSQL環境を作る
laravel sailで作成した環境にVue Router4を導入する方法を記載します。

Vue Routerとは

Vue.js公式のルーターです。

https://router.vuejs.org/introduction.html

環境

WSL2
DockerDesktop
laravel10
- sailと入力するだけでSailコマンドを実行できるように設定済
Vue3.js

インストール

以下を実行し、Vue Router4をインストールします。

sail npm install --save-dev vue-router@4

表示するvueファイルの作成

resources/jsにてviewsディレクトリを作成し、その中に試しに表示するAboutView.vueファイルを作成します。

AboutView.vue

<template>
    <h1>About</h1>
</template>

<script>
export default {
    name: "AboutView",
};
</script>

index.jsファイルの作成

resources/jsにてrouterディレクトリを作成し、その中にindex.jsファイルを作成します。

index.js

import { createRouter, createWebHistory } from "vue-router";
import AboutView from "../views/AboutView.vue";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: "/about",
            name: "about",
            component: AboutView,
        },
    ],
});

export default router;

app.jsを修正し、Vue Routerを使えるようにする

resources/js/app.jsを以下のように修正します。

import "./bootstrap";

import { createApp } from "vue";
import App from "./App.vue";
+ import router from "./router";

const app = createApp(App);

+ app.use(router).mount("#app");
- app.mount("#app");

App.vueにrouter-viewを読み込ませる

resources/js/App.vueを以下のように書き換えます。

App.vue

<template>
  <router-view />
</template>

web.phpの修正

このまま、http://localhost/aboutへアクセスすると、404エラーとなってしまいます。
これは、laravelにて、http://localhost/以外のルーティングが設定されていないからです。

routes/web.phpを以下のように書き換えます。

web.php

Route::get('/{any}', function () {
    return view('app');
})->where('any', '.*');

whereメソッドを使用して正規表現でanyを0文字以上とマッチするよう制約します。
（/以下に何もなくても、何かが入ってもOKとなる）

再度http://localhost/aboutへアクセスすると、resources/js/views/AboutView.vueで設定した通りに表示されました！

参考