VueRouter is not defined

Question

I have a laravel project and want use Vue.js for frontend. But i have never used something more complicated than jquery. I can't run vue-router.

In my app.js

require('./bootstrap');
require('./vue-router');
require('./routes');

window.Vue = require('vue');
     const app = new Vue({
     el: '#app',
});

Then i copy code vue-router from https://router.vuejs.org/en/installation.html

In my routes.js

const router = new VueRouter();

var App = Vue.extend({});

router.start(App, '#app');

And when i try open page in console i see next : "VueRouter is not defined"

Answer 1

You have to tell Vue to use VueRouter using the method Vue.use() first. So, do:

import VueRouter from 'vue-router'

# add this code
Vue.use(VueRouter)

var router = new VueRouter({
  routes: [
    {path: 'home', component: homeComponent} 
  ]
})

UPDATED:

First install vue-router using

npm install --save vue-router

Then import and use it like

import VueRouter from 'vue-router'

Then use it in vue

Vue.use(VueRouter)

Then define your routes:

const routes = [
 {path: '/', component: SomeComponent}
]

then initialize the router and pass it the routes

var router = new VueRouter({
  routes: routes,
  mode: 'history'
})

Pass router to vuejs then profit :)

new Vue({
  el: '#root',
  router: router
})