｜対象となる方
- Laravel および Vue.js を学習されている方（初学者の方でも大丈夫です！）
- Laravel(ver.8) と Vue.js(ver.2) を連携させて SPA の構築環境の整え方を知りたい方
｜環境構築
今回は基本的にSPA(Single Page Application)環境を構築するだけですので、データベースを必要としません。なので、PHPおよびcomposer、Node.js、npmが使える環境であればどの場所に設置していただいても構いません。（PHPおよびcomposer、Node.js、npmが使える環境とは… php -v や composer --version と打ってバージョン情報が表示される状態かと思います。）
- Laravel のバージョンは 8 です。（2021年4月現在 8.38.0 でした）
- Vue.js のバージョンは 2 です。（最新のバージョンは 3 ですが、対応しているのが 2.6.12 でした）
Laravel のインストール
今回は、例としてデスクトップに構築します。cd Desktopでデスクトップに移動します。その後、laravel-vue-spa というプロジェクト名でLaravelをインストールします。
composer create-project --prefer-dist laravel/laravel laravel-vue-spa "8.*"2021年4月現在、Laravel の最新バージョンは８なので"8.*"を記入しなくても最新のものが入ります。
一度、インストールが完了しているか確認しておきましょう。cd laravel-vue-spaでプロジェクト内に移動し、php artisan serveでサーバーを起動してください。URLが指定される（おそらく http://127.0.0.1:8000）と思いますので、指定されたURLにアクセスして Welcomeページが表示されることを確認してください。
Vue.js のセットアップ
続いて Vue のセットアップをやっていきましょう！ターミナルでプロジェクト内に入り、以下のコマンドを叩いてください。
composer require laravel/uiこちらのlaravel/uiはフロントエンドの構築を容易にすることを助けてくれるライブラリです。Laravel 8 からは公式ドキュメントから Frontend の項目がなくなり、Laravel Breeze などが推奨されるようになってきておりますが、今回は一旦無視して Laravel8 + Vue.js2 環境を整えましょう！！
ちなみに、laravel/ui -GitHub 公式のリポジトリでも 「最新バージョンのLaravelでも引き続き動作しますが、新しいプロジェクトではLaravel Breezeの使用を検討する必要があります。」とは書かれていますね…
話を戻して、上のライブラリのインストールが完了したら以下のコマンドで vue を指定してください。
php artisan ui vueその次に javascript側のモジュールをインストールしましょう。インストールが完了したら併せてコンパイルもしておきましょう！
npm install && npm run dev私の場合、なぜか１回目のコンパイルが失敗したので、もう１回npm run devしました^^;
welcome ページの編集
続いて、Laravelの blade テンプレートに Vue.js のコンポーネントを乗っける作業をします。reourcesディレクトリの中のviewsディレクトリ内にあるwelcome.blade.phpファイルを以下のように修正します。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
<div id="app">
<example-component />
</div>
</body>
</html>これで welcome ページ（”/”）にアクセスすると <example-component />が表示されます。
ちなみに、このexample-componentはreourcesディレクトリの中のjsディレクトリの中のcomponentsディレクトリ内にありますので、修正して使いたい場合はそちらを修正してください。
また、今回はコマンドで自動的に生成してくれる ExampleComponent.vue を使いましたが、よくある App.vue などを blade テンプレートに乗っける場合は、App.vueファイルを自分で作成し、 resources→js にあるapp.jsに記述されている以下の部分を App.vue を読み込むように指定してあげるとOKです。
Vue.component('example-component', require('./components/ExampleComponent.vue').default);SPA にするためのルート設定
このままだとルート（”/”）以外の別のURLにアクセスすると404ページとなってしまいます。
どのURLにアクセスしても Vue のコンポーネントが表示されるようにしましょう！routesディレクトリ内にあるweb.phpを以下のように修正してください。
<?php
use Illuminate\Support\Facades\Route;
Route::get('{any}', function () {
return view('welcome');
})->where('any', '.*');これで、どのようなURLにアクセスされたとしてもLaravel側は常に welcome.blade.php ファイルを表示し続けます。この状態をうまく利用してVue.jsで画面の切り替えをしていけばいいということになります。
今回は以上です！この後はご自身でいろんな開発をしてみてください！ではでは〜
