0

Hey everyone laravel 9 vue 3 and vue-router the problem is that localhost:8000/api/admin/login is not available. Transition opens non-existent vue components page Can you suggest how to exclude api prefix from vue router. Backend: Laravel 9 PHP: 8.0 Fronted: Vue3,axios, vue-routera web.php

Route::get('{any?}', function () {
    return view('welcome');
})->where('any', '.*');

api.php

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\API\Admin\UserController;
Route::any('login', [UserController::class, 'login']);
Route::any('register', [UserController::class, 'register']);
Route::group(['middleware' => 'auth:api'], function () {
    Route::get('logout', [UserController::class, 'logout']);
    Route::get('user', [UserController::class, 'user']);
});

app.js

import {createApp} from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import axios from 'axios'
import App from './App.vue'
import router from './router'

const app = createApp(App)
app.use(ElementPlus)
app.use(router, axios)
app.config.globalProperties.$axios = axios
app.mount("#app")

router.js

import { createRouter, createWebHistory } from 'vue-router';
import Home from './components/Main/HomeComponent.vue';
import Login from './components/Main/LoginComponent.vue';
import Dashboard from './components/Main/DashboardComponent.vue';

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home,
        meta: {
            requiresAuth: false,
            title: 'Home',
        }
    },
    {
        path: '/login',
        name: 'login',
        component: Login,
        meta: {
            requiresAuth: false,
            title: 'Login',
        }
    },
    {
        path: '/dashboard',
        name: 'dashboard',
        component: Dashboard,
        meta: {
            requiresAuth: true,
            title: 'Dashboard',
        }
    }
]

const router = createRouter({
    history: createWebHistory(),
    mode: 'history',
    routes,
    linkExactActiveClass: 'active'
});

// eslint-disable-next-line no-unused-vars
router.beforeEach((to, from) => {
    document.title = to.meta.title;
    if (to.meta.requiresAuth === true && !this.$store.authenticated) {
        return this.$router.push('/login');
    }
})
export default router

In the end, calling api route.php worked correctly

0 Answers0