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

nafeeur10's avatar

Cannot read property 'push' of undefined in Vuejs

I am using Vue Cli but giving this error! I am trying to Register and then move to Index page. But router is not working here.

In main.js I used router for NProgress, here it is working but why not in this case??

main.js

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter);

import router from './Router/routes.js'

import User from './Helpers/User'
window.User = User

new Vue({
  render: h => h(App),
  router,
}).$mount('#app')

User.js

import Axios from "axios";

class User {
    register(data) {
        let uri = 'http://localhost:8000/api/auth/register';
        let self = this;
        Axios.post(uri, data).then((res) => {
            self.$router.push({name:'Index'})
        }).catch( (error) => {
            console.log(error);
        });
    }
}

export default User = new User();

Register.vue

<template>
  <div class="col-md-12">
    <div class="card card-container">
      
      <form name="form" @submit.prevent="handleRegister">
       ----
      </form>
   
  </div>
</template>
<script>
export default {
   data() { return { user: {} }},
   
     methods: {
    handleRegister() {
        this.registration();
      });
    },

    registration() {
        User.register(this.user);
    }
  },
   
}
</script>

routes.js

import components are okay. I also import Vue and VueRouter here.

const routes = [
    //
];

const router = new VueRouter({
    routes
})


export default router

What is the problem here?? router is working in main.js

Giving me error in this line:

self.$router.push({name:'Index'})
0 likes
0 replies

Please or to participate in this conversation.