How can I create and configure multiple Vue Instance in Laravel Mix?

Question

I have a PHP project with Laravel and Vue.js I want to handle Admin and Client separately. So I need to add 1 Vue Instance. But I don't know how to create and configure it. Please help me to solve this problem. Thank you very much.

Answer 1

mix
  .js('resources/js/admin.js', 'public/js').vue()
  .js('resources/js/client.js', 'public/js').vue()

On your blade file, inject proper js file like:

@if (str_contains(Route::currentRouteName(), "admin"))
<script src="{{ asset('js/admin.js') }}" defer></script>
@else
<script src="{{ asset('js/clients.js') }}" defer></script>

Answer 2

mix.js('resources/front/js/app.js', 'public/js').vue()
.sass('resources/front/css/app.scss', 'public/css')
    .options({
    autoprefixer: {
        options: {
            browsers: [
                'last 6 versions',
            ]
        }
    }
})
mix.browserSync('your_site')


mix.js('resources/admin/js/adminapp.js', 'public/js').vue()
.sass('resources/admin/css/adminapp.scss', 'public/css')
.options({
    autoprefixer: {
        options: {
            browsers: [
                'last 6 versions',
            ]
        }
    }
})
mix.browserSync('your_site/admin')