Laravel Multi-Auth, Multi SPA.

admin.js

// resources/js/app1/admin.js
// All components, routes & everything related to the 1st SPA will be in 'app1' directory (you can give any name to it).
// resources/js/app1/Components
// resources/js/app1/routes
// resources/js/app1/store
// resources/js/app1/etc
// even the css/sass can be put in resources/js/app1/css/* of realtive theme instead of resources/css

import Vue from 'vue'

/**
 * Register Axios.
 */
window.axios = require('axios')

/**
 * Moment
 */
window.moment = require('moment')

/**
 * Initialize Vue application instance
 */
let app = document.getElementById('app')
let title = document.head.querySelector('meta[name="title"]').content

new Vue({
    metaInfo () {
        return {
            title: 'Loading…',
            titleTemplate: '%s - ' + title
        }
    },

    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => import(`@/views/${ name }`).then(module => module.default),
            transformProps: props => {
                return {
                    ...props,
                    errors: new Errors(props.errors),
                }
            },
        },
    }),
}).$mount(app)

agency.js

// resources/js/app2/agency.js
// Similarly 'app2' directory for the second SPA
// so, finally you'll have separate apps 
// resources/js/app1/* 
// resources/js/app2/*

import Vue from 'vue'

/**
 * Register Axios.
 */
window.axios = require('axios')

/**
 * Moment
 */
window.moment = require('moment')

/**
 * Initialize Vue application instance
 */
let app = document.getElementById('app')
let title = document.head.querySelector('meta[name="title"]').content

new Vue({
    metaInfo () {
        return {
            title: 'Loading…',
            titleTemplate: '%s - ' + title
        }
    },

    render: h => h(InertiaApp, {
        props: {
            initialPage: JSON.parse(app.dataset.page),
            resolveComponent: name => import(`@/views/${ name }`).then(module => module.default),
            transformProps: props => {
                return {
                    ...props,
                    errors: new Errors(props.errors),
                }
            },
        },
    }),
}).$mount(app)

blade files

resources/views/app1/app.blade.php

blade file for admin shall request 
{{ mix('app1/js/app.js') }}
{{ mix('app1/css/app.css') }}


resources/views/app2/app.blade.php

blade file for agency shall request 
{{ mix('app2/js/app.js') }}
{{ mix('app2/css/app.css') }}


if there's any public files
you can separate them by putting them in separate directory

public/themes/theme1/*
public/themes/theme2/*

Multi Auth

if you don't understand multi auth, reach out.

webpack.mix.js

// Both apps will be compiled seaprately

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app1/app.js', 'public/app1/js')
    .sass('resources/js/app1/sass/app.scss', 'public/app1/css') // for example.
    .js('resources/js/app2/app.js', 'public/app2/js')
    .sass('resources/js/app2/sass/app.scss', 'public/app2/css') // for example.
    .options({
        processCssUrls: false,
    })
    .webpackConfig({})
    .babelConfig({
        plugins: ['@babel/plugin-syntax-dynamic-import'],
    })
    .version()
    .sourceMaps();