Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ

まとめ

• 本投稿は Laravel 6 、 Vue.js 3 が入っただけの状態から、最初の SPA ページを用意するためにやること – oki2a24 の続きとなります。
• npm install --save-dev vue-router@4 でインストール
• Vue Router を動かすだけの簡単なサンプルを、 Getting Started | Vue Router をほぼそのまま使って作り、動作確認

実践

npm install --save-dev vue-router@4 でインストールしましたが、特に何も引っかかりませんでした。

次に、 Vue Router を動かすだけの簡単なサンプルを、 Getting Started | Vue Router をほぼそのまま使って作りました。

ポイントと差分です。

• resources/js/app.js に、サンプルのコンポーネント (Home, About) と、それらのルート routes を定義する。
• vue-router から createRouter, CreateWebHistory を読み込み、これらを使って Vue Router を生成 (router) する。
• createApp 時に Vue Router も読み込むように設定する。
• 既存の適当なコンポーネントファイルに <router-view /> を書いて、 URL で指定したときにその内容をそこに表示するようにする。

$ git diff
diff --git a/laravel/resources/js/app.js b/laravel/resources/js/app.js
index 656b6fb..705b0bf 100644
--- a/laravel/resources/js/app.js
+++ b/laravel/resources/js/app.js
@@ -27,8 +27,22 @@ import ExampleComponent from "./components/ExampleComponent.vue";
  * or customize the JavaScript scaffolding to fit your unique needs.
  */

+const Home = { template: "<div>Home</div>" };
+const About = { template: "<div>About</div>" };
+const routes = [
+  { path: "/", component: Home },
+  { path: "/about", component: About },
+];
+import { createRouter, createWebHistory } from "vue-router";
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+});
+
 createApp({
   components: {
     ExampleComponent,
   },
-}).mount("#app");
+})
+  .use(router)
+  .mount("#app");
diff --git a/laravel/resources/js/components/ExampleComponent.vue b/laravel/resources/js/components/ExampleComponent.vue
index 47eda43..1aaedc3 100644
--- a/laravel/resources/js/components/ExampleComponent.vue
+++ b/laravel/resources/js/components/ExampleComponent.vue
@@ -1,4 +1,5 @@
 <template>
+  <router-view />
   <div class="container">
     <div class="row justify-content-center">
       <div class="col-md-8">
$

これで http://localhost や http://localhost/about へアクセスすると、無事サンプルの Home や About を表示することができました!

おわりに、と、今後のための補足。

<router-view /> をテキトーなファイルに記述するのは筋が悪いです。 以前 Laravel の受け付けたフロントの URL は全て resources/views/app.blade.php ビューを返すようにし、ここで Vue.js を表示するようにしました。 Vue.js を表示するとき、ルートとなるシングルファイルコンポーネント (SFC) を指定したいです。そして、そのルートの SFC に <router-view /> を記述したいです。

最後に、本投稿の参考ページです。ありがとうございました!

• Installation | Vue Router

以上です。