Laravel 5.6 + vue.js app router + laravel passport - vue.js

Question

I am testing Laravel5.6+Vue app, I have activated Laravel Auth and Passport.
My project:
API uses Laravel Passport.
Web Laravel Auth is active.
Vue App
Since Laravel Auth is active, it seems like Auth triggers and validate user session, if he is login or not and redirect to Auth /login route.
When I disable auth routes in web.php, error occurs.
// Auth::routes();
Error
InvalidArgumentException
Route [login] not defined.
Since I am using Vue app and Laravel API with Passport, how can avoid Laravel web Auth to validate Vue app?
web.php
Auth::routes();
Route::get('{any}', 'HomeController#index')->name('home')->where('any','.*');
api.php
Route::group([
'prefix' => 'auth'
], function () {
Route::group(['middleware' => 'auth:api'], function() {
Route::get('logout', 'API\AuthController#logout');
Route::get('user', 'API\AuthController#user');
});
});
Route::group(['middleware' => 'auth:api'], function() {
Route::get('/application/all', 'ApplicationController#index');
});
Route::post('/auth/login', 'API\AuthController#login');
Route::post('/auth/register', 'API\AuthController#register');
Vue
routes.js
import Home from './components/Home.vue';
import Login from './components/auth/Login.vue';
import Logout from './components/auth/Logout.vue';
import Profile from './components/auth/Profile.vue';
import Register from './components/auth/Register.vue';
import ApplicationList from './components/content-app/ApplicationList.vue';
export const routes = [
{
path: '/',
component: Home,
meta: {
requiresVisitor: true,
}
},
{
name: 'user-login',
path: '/user/login',
component: Login,
meta: {
requiresVisitor: true,
}
},
{
name: 'user-register',
path: '/user/register',
component: Register,
meta: {
requiresVisitor: true,
}
},
{
name: 'user-profile',
path: '/user/profile',
component: Profile,
meta: {
requiresAuth: true,
}
},
{
path: '/logout',
component: Logout,
meta: {
requiresAuth: true,
}
},
{
path: '/content/application-list',
component: ApplicationList,
meta: {
requiresAuth: true,
}
}
];
app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import axios from 'axios'
import {routes} from './routes';
import StoreDate from './store';
import MainApp from './components/MailApp.vue';
Vue.use(VueRouter);
Vue.use(Vuex);
const store = new Vuex.Store(StoreDate);
const router = new VueRouter({
routes,
mode: 'history'
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
// this route requires auth, check if logged in
// if not, redirect to login page.
if (!store.getters.loggedIn) {
next({
path: '/login',
query: { auth: 'unauthenticated' } //query: { redirect: to.fullPath }
})
} else {
next()
}
} else if (to.matched.some(record => record.meta.requiresVisitor)) {
if (store.getters.loggedIn && (to.path == '/login' || to.path == '/register')) {
next({
path: '/profile',
})
} else {
next()
}
} else {
next() // make sure to always call next()!
}
})
const app = new Vue({
el: '#app',
router,
store,
components: {
MainApp
}
});
///////// OVER WRITING JS
$('.navbar-nav>li>a').on('click', function(){
$('.navbar-collapse').collapse('hide');
});
$('.navbar-nav>navbar-brand').on('click', function(){
$('.navbar-collapse').collapse('hide');
});