Difference between Vue.use and constructor import with VueRouter

Question

What is the difference between these two options when importing VueRouter?

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

vs

Vue.use(VueRouter);

I understand that Vue.use installs a plugin, is it necessary when passing it into my Vue instance constructor?

Answer 1

Your first example is passing a router definition object to the Vue instance. Your second example is registering the VueRouter plugin.

The VueRouter plugin needs to be registered to Vue via Vue.use(VueRouter) prior to passing the router object.

If you are confused why your first example works, even though you haven't registered VueRouter, I'd expect that Vue.use(VueRouter) is being called in the router.js file being imported.