Laravel Vuejs Error: Uncaught ReferenceError: Login is not defined

Question

I'm trying to use vue-router in a CRUD app I've followed in a tutorial. The links showing up but I get this error: Uncaught ReferenceError: Login is not defined

I already imported vue-router in my app.js and laid out the routes in my routes.js file. Yet the error still pops out. I've been searching for this error for a while now and can't seem to find out what's causing this.

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

Thanks!

What tutorial are you following? It's a bit of a mess with the mixed use of require and import. I recommend following the official vue-router guide ~ router.vuejs.org/guide — Phil
– Phil, Commented May 14, 2019 at 5:41
The main problem is the routes.js isn't being used, and the app,js looks like it has some old boilerplate routes — Trent
– Trent, Commented May 14, 2019 at 5:41
Any reason to be mixing require calls with import syntax? That shouldn’t be necessary... — Thiago Barcala
– Thiago Barcala, Commented May 14, 2019 at 5:42
@Phil Its this one: youtube.com/watch?v=DJ6PD_jBtU0&t=1s I'll try that link too. Thanks! — Subaru
– Subaru, Commented May 14, 2019 at 6:09

Phil · Accepted Answer · 2019-05-14 06:30:29Z

2

Like all the other answers, there are so many things wrong with this code.

Firstly, there is a routes.js file, but it's not being used.

I've created a sandbox version of your code https://codesandbox.io/s/z22rx97z24 to show you a working version of the router/app.

What's changed?

Firstly, you should export an instance of the vue router in the routes.js not just define a const. This is the recommended way of routing in Vue.

import Vue from "vue";
import Router from "vue-router";

import App from "./App";
import Login from "./components/auth/Login";
import Logout from "./components/auth/Logout";
import Register from "./components/auth/Register";

Vue.use(Router);

export default new Router({
  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
    }
  ]
});

Secondly, you import that instance into app.js and assign into the router property of the Vue instance.

import Vue from "vue";
import VueRouter from "vue-router";
import router from "./routes";

Vue.use(VueRouter);

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

  router: router
});

You keep components out of your app.js where possible. This allows you to do things like on-demand resource loading inside your router.js etc.

edited May 14, 2019 at 6:30

Phil

166k25 gold badges265 silver badges269 bronze badges

answered May 14, 2019 at 5:52

Trent

3,1332 gold badges37 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Phil Over a year ago

"This is the recommended way of routing in Vue" 👈 not really. Functionally, it's identical

Subaru Over a year ago

I'll try this out, thanks. Still kinda new to vue-router.

Trent Over a year ago

There's one in every crowd @Phil - go build a new vue project from the CLI (the people who created the framework) and select vue-router as a dependency during setup. You'll find this is how they boilerplate it - so yeah, I'd say it's the recommended (not the only) way of doing it.

Trent Over a year ago

@Phil - also thanks for the edit, I didn't realise you could add the language specific marker. cheers for that

Trent Over a year ago

@Subaru - that's really a new stackoverflow question. I only dealt with your router issue. The component stuff and raw tags etc is completely separate.

|

Cláudio Sumburane · Accepted Answer · 2019-05-14 05:46:56Z

0

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.

answered May 14, 2019 at 5:46

Cláudio Sumburane

14812 bronze badges

Comments

Phil · Accepted Answer · 2019-05-14 06:47:51Z

0

You seem to have mixed up some code in your app.js file.

Specifically, your problem is here...

  { path: '/login', component: Login },

You don't have a Login symbol defined anywhere. You're also defining some global components which I'm not sure you want to do.

What I think you want is to remove all this...

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

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

and replace it with

import { routes } from './routes'

const router = new VueRouter({ routes })

I'm also a little suspicious of

require('./bootstrap');

but you haven't said what bootstrap is so I'll leave that with you to figure out.

edited May 14, 2019 at 6:47

answered May 14, 2019 at 5:46

Phil

166k25 gold badges265 silver badges269 bronze badges

3 Comments

Subaru Over a year ago

I tried what you suggested but now i am getting this error: Uncaught TypeError: routes.forEach is not a function

Phil Over a year ago

@Subaru I didn't realise you were exporting the symbol routes instead of a default. I've updated my answer but check out Trent's answer, it's more comprehensive

Subaru Over a year ago

Oh, okay. Thanks again!

Collectives™ on Stack Overflow

Laravel Vuejs Error: Uncaught ReferenceError: Login is not defined

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related