Laravel+Vue LaravelMixでフロントと管理画面を別のSPAとして扱う

PHP WEBシステム開発

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.scss

Laravel 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が使えなかったことを追記しておきます。