Laravel Vuejs Error: Uncaught ReferenceError: Login is not defined

Related searches

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!

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.

Laravel Vuejs Error: Uncaught ReferenceError: Login is not defined , 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� The most concise screencasts for the working developer, updated daily. There's no shortage of content at Laracasts. In fact, you could watch nonstop for days upon days, and still not see everything!

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.

[Vue.js] Laravel Vuejs Error Uncaught ReferenceError Login is not , [Vue.js] Laravel Vuejs Error Uncaught ReferenceError Login is not defined. I'm trying to use vue-router in a CRUD app I've followed in a tutorial. Uncaught ReferenceError: Vue is not defined js files I still get the error: Uncaught ReferenceError: Vue is not factory default for Laravel

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.

ReferenceError: Vue is not defined!, Since Laravel 6, the framework does not dictates which frontend framework you will use.. so you might need to install the Here is the error from the console: Uncaught ReferenceError: Vue is not defined at (index):102 (anonymous) @ ( index):102 Please sign in or create an account to participate in this conversation. Vuejs/Laravel Mix Error: Uncaught ReferenceError: axios is not defined Posted 3 years ago by wood4283 I'm trying to load axios, but I'm getting this error: Uncaught ReferenceError: axios is not defined .

Uncaught ReferenceError: Vue is not defined � Issue #786 , Vue', 'Vue'] }); And lastly removed any Vue refrence in app.js and bootstrap.js But Uncaught ReferenceError: Vue is not defined #786 use Vue in other js files I still get the error: Uncaught ReferenceError: Vue is not defined Keep your Vue settings as per factory default for Laravel-Mix, which is to Sign in to comment. Whenever I click on div it gives me error ‘Uncaught ReferenceError: sel is not defined at HTMLDivElement.onclick’ I’m currently working on angular 8. And it

Uncaught ReferenceError: Vue is not defined Code Example, Javascript queries related to “Uncaught ReferenceError: Vue is not defined” 16: 16 error 'Login' is not defined no-undef vue � error '_' is not defined Angular Laravel has been blocked by CORS policy: Request header field� Error: Module name "bootstrap" has not been loaded yet for context: _. Use require([]) Whenever I try to use Vue outside of the package itself there is no problem but within the project that appears.

but options (as webpack so graciously tells you) is not defined. I should probably add brackets around options in the installation guide, to indicate that this is an (optional) object defined by the user.

Comments
  • 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
  • The main problem is the routes.js isn't being used, and the app,js looks like it has some old boilerplate routes
  • Any reason to be mixing require calls with import syntax? That shouldn’t be necessary...
  • @Phil Its this one: youtube.com/watch?v=DJ6PD_jBtU0&t=1s I'll try that link too. Thanks!
  • "This is the recommended way of routing in Vue" 👈 not really. Functionally, it's identical
  • I'll try this out, thanks. Still kinda new to vue-router.
  • 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.
  • @Phil - also thanks for the edit, I didn't realise you could add the language specific marker. cheers for that
  • @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.
  • I tried what you suggested but now i am getting this error: Uncaught TypeError: routes.forEach is not a function
  • @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
  • Oh, okay. Thanks again!