LaravelをAuthをインストールした時点でVue.jsを利用でき、resources/js/app.jsでVueインスタンスを生成していますが、このままではapp.jsだけでアプリケーション全体のVue環境設定を行うことになります。
今回はフロントとユーザの管理画面で別のVueインスタンスを生成するようにフロントはapp.js、管理画面はuser.jsとしてVue.jsを動作するようにLaravel Mixで両方コンパイルするように設定します。
これにより、フロントと管理画面でそれぞれ必要なモジュールだけ使用することができたり、Vue Routerのルーティング設定を分けることも可能になります。
目次
開発環境
Laradock v10
Laravel 7
Vue 2.6
管理画面用のuser.jsとuser.scssを作成
既に存在するresources/js/app.jsをコピーしてresources/js/user.jsを作成しましょう。
同様にresources/sass/app.scssをコピーしてresources/sass/user.scssも作成しましょう。
resources
┣ js
┃ ┣ components
┃ ┣ app.js
┃ ┣ bootstrap.js
┃ ┗ user.js
┗ sass
┣ _variables.scss
┣ app.scss
┗ user.scssLaravel Mixの設定
プロジェクト直下のwebpack.mix.jsを変更します。
/*
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
*/
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/user.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css')
.sass('resources/sass/user.scss', 'public/css');npm run dev 等でコンパイルすることで
public/js/app.js
public/js/user.js
public/css/app.css
public/css/user.css
が生成されます。
Bladeテンプレート
上記で生成されたjsとcssをフロント、管理画面でそれぞれ読み込めば完了です。
フロント
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">管理画面
<!-- Scripts -->
<script src="{{ asset('js/user.js') }}" defer></script>
<!-- Styles -->
<link href="{{ asset('css/user.css') }}" rel="stylesheet">Laravel:ルーティング設定
Laravel側のルーティングも設定しなければなりません。
管理画面（/user以下）へのアクセスは
resources/views/user.blade.php
フロントへのアクセスは
resources/views/app.blade.php
とする場合のroutes/web.phpの設定は以下のようにします。
Auth::routes(['verify' => true]);
// フロント
Route::get('/{any?}', function() {
return view('app');
})->where('any', '^(?!user\/).*');
// 管理画面
Route::middleware('verified')->group(function() {
Route::get('/user/{any?}', function() {
return view('user');
})->where('any', '.*');
});/loginとかはAuth::routesがよしなにしてくれるみたいです。
後記
意外と簡単ですね！
Laravelの管理画面をvue-routerを使ってSPA化でも書きましたが、このようにapp.jsとuser.jsなど複数のVueインスタンスがあるとVue RouterでDynamic Importが使えなかったことを追記しておきます。