Cannot get vue-router to work with webpack

Question

I'm trying to get vue-router to work without success and it got me quite angry after a while since i don't see any issue.

I'm using webpack via Elixir in Laravel, which has gulpfile like this:

const elixir = require('laravel-elixir');

require('laravel-elixir-vue');

elixir(mix => {
mix.sass('app.scss')
   .webpack('app.js');
});

Into my app.js file I'm "compiling" following code

window.Vue = require('vue');

var VueResource = require('vue-resource');
var VueRouter = require('vue-router');

Vue.use(VueResource);
Vue.use(VueRouter);

And when I call in browser console

new VueRouter({})

I got an error saying VueRouter is undefined. Why? The vue-resource is even in the app.js.

My package.json looks like this:

{
  "private": true,
  "scripts": {
    "prod": "gulp --production",
    "dev": "gulp watch"
  },
  "devDependencies": {
    "bootstrap-sass": "^3.3.7",
    "foundation-sites": "^6.2.3",
    "gulp": "^3.9.1",
    "jquery": "^2.2.4",
    "laravel-elixir": "^6.0.0-9",
    "laravel-elixir-vue": "^0.1.4",
    "laravel-elixir-webpack-official": "^1.0.2",
    "lodash": "^4.14.0",
    "script-loader": "^0.7.0",
    "vue": "^2.0.1",
    "vue-resource": "^0.9.3",
    "vue-router": "^2.0.0"
  }
}

Can anyone help?

Psi · Accepted Answer · 2016-10-11 13:39:58Z

1

thats okay cause you didnt bind VueRouter to the window object as you did with window.Vue = require('vue');

But usually you dont need the Router in the window Do it in your app.js:

window.Vue = require('vue');

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

var router = new VueRouter({
  routes: {
    {path: '', component: require('./components/MyComponent.vue')},
    {path: '/dash', component: require('./components/Dash.vue')},
  }
});

var AppComponent = require('./components/App.vue');

/* eslint-disable no-new */
var app = new Vue({
  el: '#app',
  router,
  render: h => h(AppComponent),
});

edited Oct 11, 2016 at 13:39

answered Oct 11, 2016 at 13:26

Psi

4744 silver badges14 bronze badges

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

2 Comments

Beau Over a year ago

So what's the solution? You're saying I should bind it this way window.Vue.use(VueRouter)? Because if Vue is not binded to window, it doesn't work at all...

Beau Over a year ago

Can you spare few minutes on skype or hangout? It still doesn't go for me.

Collectives™ on Stack Overflow

Cannot get vue-router to work with webpack

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related