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

Either use vue.use(window.vueRouter) or import vueRouter from 'vue-router' or let vueRouter = require('vue-router') — Amresh Venugopal
– Amresh Venugopal, Commented Mar 2, 2017 at 9:09

Pori · Accepted Answer · 2017-10-10 21:57:05Z

10

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)

answered Oct 10, 2017 at 21:57

Pori

6963 gold badges7 silver badges18 bronze badges

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

1 Comment

CodeNinja Over a year ago

Even when the solution bellow is accepted, i like this one more because of the explanation. Thanks! For those who want to implement the VueRouter and are not verry familiar with Vue, this how-to is very easy to follow: laravel-news.com/using-vue-router-laravel

Jabaa · Accepted Answer · 2017-03-02 09:56:46Z

7

Based on the comments finally i resolved with this import

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

answered Mar 2, 2017 at 9:56

Jabaa

1,7637 gold badges36 silver badges64 bronze badges

3 Comments

cww Over a year ago

Just noticed we have to put this in resources/assets/js/app.js instead of resources/assets/js/bootstrap.js

Jabaa Over a year ago

You must include this code in resources/assets/js/app.js

Abhishek Pakhare Over a year ago

It works like a charm. But can you please explain what this code is doing?

Collectives™ on Stack Overflow

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

2 Answers 2

Solution 1: ES Module Import

Solution 2: CommonJS Require

Either Solution

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Solution 1: ES Module Import

Solution 2: CommonJS Require

Either Solution

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related