multiple entry web routes in laravel and vue SPA app

Question

I am creating an application with laravel backend and vue in frontend. I need 3 separate SPA entry routes (each for guest users, registered users and admin users) in the web.php file like this:

Route::get('/', function() {
    return view('guest.index');
});

Route::any('/admin/{any}', function () {
    return view('dashboard.admin.dashboard');
})->where(['any', '.*']);

Route::get('/{any}', function() {
    return view('user.dashboard');
})->where('any',  '((?!(api)).)*');

My app.js file looks like this:

require('./bootstrap');

import Vue from 'vue'
import router from './routes/index'

export const eventBus = new Vue();

// using vue-router
import VueRouter from 'vue-router'
import { routes } from "./routes";
import axios from 'axios';

Vue.use(VueRouter)

import Guest from './pages/Guest.vue';

// Entry point for Users
import Dashboard from './pages/Dashboard.vue';

// Admin pages
import Admin from './components/admin/vuelayouts/Admin.vue';

if (document.getElementById('dashboard')) {
    const dashboard = new Vue({
        el: '#dashboard',
        components: {
            Dashboard
        },
        router
    });
}

if (document.getElementById('guest')) {
    const guest = new Vue({
        el: '#guest',
        components: {
            Guest
        },
        router
    });
}

if (document.getElementById('admin')) {
    Vue.component('admin', Admin);

    Vue.component('paginate', Paginate);
    Vue.use(VueFlashMessage);

    const dashboard = new Vue({
        el: '#adminapp',
        components: {

        },
        router
    });
}

This doesn't work so far. I can only access the guest and user pages but unable to reach the admin page. Is using the if-blocks to access the different routes, the best approach? Any ideas please?

Answer 1

It's possible that '/admin/{any}' and '/{any}' routes are clashing, as if you type in /admin/ it will route you over to /{any}. Could you temporarily test with a different routing URIs to confirm it is not due to that?

As for the Vue part, wouldn't it make more sense to use single file components . That way you wouldn't need to check for the presence of an element by ID, just drop the SFC into your blade template like:

<admin></admin>

And move the rest of your code to the single file component.