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?

Can't you piggyback off of Vue Router and redirect them to url('/#/admin') from your controller? Your Vue code should not have to repeat itself like that. And I see that you imported your routes but you never attached them to your router. You should read the docs on how to do this. — parker_codes

Imer Muhović Imer Muhović · Accepted Answer · 2018-04-05T11:38:14

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.

multiple entry web routes in laravel and vue SPA app

1 Answers