SPA – oki2a24

まとめ

feat: Bootstrap 5 を Laravel 8 の Vue.js 3 SPA に導入する · oki2a24/laravel8-boilerplate@dd592f4 or feat: Bootstrap 5 を Laravel 8 の Vue.js 3 SPA に導入する by oki2a24 · Pull Request #4 · oki2a24/laravel8-boilerplate にやったことが全て残っている。
npm install したもの
- @popperjs/core
- bootstrap
- resolve-url-loader
- sass
- sass-loader
laravel/webpack.mix.js に npm build 時の Bootstrap 5 の SASS の設定を追加
laravel/resources/js/bootstrap.js に Bootstrap 5 の読み込を追加
laravel/resources/sass/app.scss ファイルを追加し、 Bootstrap 5 の SASS を読み込む。
laravel/resources/sass/_variables.scss ファイルを追加した。 Bootstrap 5 をカスタマイズする時の内容を書くためのファイル

仕組み

laravel/routes/web.php がリクエストを受け付ける。このとき、どんな URL でも 1 つの Blade ビューを返すように設定する。

返された Blade ビューに記述しておいた <div id="app"></div> や <script src="{{ mix('/js/app.js') }}"></script> などにより、 Vue.js を使えるようになる。