まとめ
- 本投稿は Laravel 6 、 Vue.js 3 のプロジェクトに Vue Router を追加するメモ – oki2a24 の続きである。
createAppの引数に Vue.js のルートとなるシングルファイルコンポーネント (SFC) を指定すればよい。- ファイルの構成は Vue Cli で Vue Router 付きで作成したプロジェクトを参考にした。
- ルートとなる SFC は
App.js - Vue Router ファイルは
router/index.js
- ルートとなる SFC は
実践
resources/js/app.js を次のように修正しました。
resources/js/App.vueを import し、createAppにセットすることで、ルートの SFC であると Vue.js に伝えている。- Vue Router 部分は
resources/js/router/index.jsへと分離した。 Vue.js にセットするにはcreateAppのチェインメソッドのuseの引数として Vue Router を渡してやればよい。
$ git diff laravel/resources/js/app.js
diff --git a/laravel/resources/js/app.js b/laravel/resources/js/app.js
index 656b6fb..1c2ed16 100644
--- a/laravel/resources/js/app.js
+++ b/laravel/resources/js/app.js
@@ -7,6 +7,8 @@
require("./bootstrap");
import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router/index.js";
/**
* The following block of code may be used to automatically register your
@@ -19,7 +21,7 @@ import { createApp } from "vue";
// const files = require.context('./', true, /\.vue$/i)
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
-import ExampleComponent from "./components/ExampleComponent.vue";
+// import ExampleComponent from "./components/ExampleComponent.vue";
/**
* Next, we will create a fresh Vue application instance and attach it to
@@ -27,8 +29,4 @@ import ExampleComponent from "./components/ExampleComponent.vue";
* or customize the JavaScript scaffolding to fit your unique needs.
*/
-createApp({
- components: {
- ExampleComponent,
- },
-}).mount("#app");
+createApp(App).use(router).mount("#app");
$
ルート SFC となる resources/js/App.vue は Vue Router の内容を表示するだけのシンプルな内容です。
<template>
<router-view />
</template>
<script>
export default {
name: "App",
setup() {},
};
</script>
また、分離した Vue Router の内容は次のようにしました。
- 今回は例なため、
resources/js/components/ディレクトリのファイルを読み込んだが、本来であれば Vue Router に記述するのはresources/js/viewsディレクトリのファイルのみとする予定 (Vue Cli で作成したプロジェクトに合わせる) 。
import { createRouter, createWebHistory } from "vue-router";
import ExampleComponent from "../components/ExampleComponent.vue"
const Home = { template: "<div>Home</div>" };
const About = { template: "<div>About</div>" };
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
component: About,
},
{
path: "/example_component",
name: "ExampleComponent",
component: ExampleComponent,
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
これでコーディングは完了です。 http://localhost や http://localhost/example_component へアクセスして、狙い通りの内容が表示されましたので成功です!
おわりに
今回は Vue.js のルートとなる SFC を追加しました。特に参考ページはありません。
Laravel 6 で Vue.js 3 を使えるようにするところで無駄があり、やり直したい気持ちはありますが、これで環境は整ったと思いますので、試してみたいことをやっていこうと思います。
以上です。