Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

kaygero's avatar

Laravel Vuejs Error: Uncaught ReferenceError: Login is not defined

Hello Everyone! I'm trying to use vue-router links in this CRUD App to load both the Login and Register pages. But I Seem to be getting this error:

Uncaught ReferenceError: Login is not defined
    at Module../resources/js/app.js (app.js:52670)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:52965)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

I already imported vue-router in my app.js and put up the routes in routes.js app.js:

require('./bootstrap');

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
         { path: '/login', component: Login },
         { path: '/register', component: Register }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
})

routes.js

import App from './App'
import Login from './components/auth/Login'
import Logout from './components/auth/Logout'
import Register from './components/auth/Register'

export const routes = [
  {
    path: '/customers',
    name: 'customers',
    component: App,
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  }
]

export default routes

api.php:

<?php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login','AuthController@login');
Route::post('/register','AuthController@register');
Route::middleware('auth:api')->post('/logout', 'AuthController@logout');

Route::get('customers','CustomerController@index');

Route::get('customer/{CustomerID}','CustomerController@show');

Route::post('customer','CustomerController@store');

Route::put('customer','CustomerController@store');

Route::delete('customer/{CustomerID}','CustomerController@destroy');
0 likes
1 reply
hollyit's avatar

In app.js:

import routes from './routes.js'
const router = new VueRouter({routes})

To your actual error. Yes you imported Login in your routes.js file, but at the error shows you, it isn't defined in app.js. You need to import things in every file you want to use it in. Just importing it in one file and thinking it will be available everywhere else goes against the whole idea behind modules and keeping the namespaces clean.

Please or to participate in this conversation.