使用する環境の話

LaravelとPHPとVue.jsとそれ周りのnpmはバージョンによって設定方法が結構違うから、バージョン周りは意識すること！

• Laravel
  • 8系
• Vue.js
  • 2系

まずはVue.jsを使えるようにしよう

• Laravelのbladeを1つだけにする
  • id="app"にする
  • web.phpで/が指すbladeも当該ファイルにしておく
• 全てのURLが/にアクセスされるようにweb.phpを下記のように変更しておく

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

• Vueを使うためにLaravel/uiをcomposer経由でインストールする
  • composer require laravel/ui
  • PHPのバージョンに注意する
    • バージョン差を回避するためにコンテナの中でインストールするのオススメ🙆‍♂️
• vueのスカフォールドをインストールする
  • php artisan ui vue
• スカフォールドをコンパイルするために下記のコマンドを実行する
  • npm install && npm run dev
  • コンテナ内ではnpmは有効じゃないから、npmは外のターミナルで実行するのがオススメ🙆‍♂️
  • Laravel8だと？正常にnpm run devできない可能性があるから、以下の方法を試す
    • ルートディレクトリ直下のnode_modulesディレクトリを削除してからnpm run install && npm run devする
    • webpack.mix.js内の.vue()部分を削除してから上記の方法を試す
• id="app"があるbladeファイルのheadタグに<script src="{{ asset('js/app.js') }}" defer></script>を埋め込む
• /にアクセスしてコンソールに以下のような文言があるのを確認する（先にnpm run watchしておく）
  • You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html
  • これが表示されているとVue.jsが正しく読み込まれている証拠らしい
  • Chromeの拡張機能からもRootコンポーネントが作成されているのが確認できる🙆‍♂️

参考サイト

https://readouble.com/laravel/8.x/ja/frontend.html?header=%25E3%2582%25A4%25E3%2583%25B3%25E3%2583%2588%25E3%2583%25AD%25E3%2583%2580%25E3%2582%25AF%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%25B3

Vue-Routerを使えるようにする

• npm経由でvue-routerをインストールする
  • npm install vue-router
• /resources/js/routes.jsを作成する
  • ここの下記のような要領でroutesの情報を書いていく

import VueRouter from "vue-router";
import Example from "Example";

const routes = [
    {
        path: "/example",
        component: Example,
        name: "example"
    }
];

const router = new VueRouter({
    routes: routes
});

export default router;

• /resources/js/app.jsを以下のように書き換える

require('./bootstrap');

import router from "./routes";
import VueRouter from "vue-router";

window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Vue.use(VueRouter);

const app = new Vue({
    el: '#app',
    router: router
});

• 下記のように、id="app"のタグ内に下記のコンポーネントを追加する

 <div id="app">
+    <router-view></router-view>
 </div>

• /resources/js/routes.jsでhistoryモードを有効にする

 const router = new VueRouter({
     routes: routes,
+    mode: "history"
 });

参考文献

https://router.vuejs.org/guide/migration/

あとはコンポーネントを書いていくだけ！

さあ、あとは好きにAPIを飛ばしてSPAを満喫するがいい👍

【余談】アプリにBootstrapを導入する方法

• app.blade.phpでcssを読み込もう！

     <title>Laravel</title>
+    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
     <script src="{{ asset('js/app.js') }}" defer></script>