Vue js;Vue router is not constructor error in simple route

Question

I am trying to implement simple routing with official route library.

Here is my app.js

 window.Vue = require('vue');
    window.VueRouter= require('vue-router');

    Vue.use(VueRouter);

const vt=Vue.component('example', require('./components/Example.vue'));

const router = new VueRouter({
      routes:[
        {
          path:'/test',
          component:vt
        }
    ]
})

const app = new Vue({
    el: '#app',
    router:router
});

But i got an error

app.js:11256 Uncaught TypeError: VueRouter is not a constructor

Answer 1

This answer is for any onlookers hoping for a little more insight into the problem.

There are two solutions here.

Solution 1: ES Module Import

In Laravel's default config [at least], vue-router is expected to be imported as an es module. So, it should be done at the top of the file.

import VueRouter from 'vue-router'

Solution 2: CommonJS Require

Since vue-router router is an es module, you will have to explicitly access the default property of the CommonJS version of the module.

const VueRouter = require('vue-router').default;

Either Solution

You will have to register Vue Router with Vue.

Vue.use(VueRouter)