Vue router hooks in NUXT middleware

Question

I am trying to close down the sidebar when my user changes route

export default function({ store }) {
    store.commit("TOGGLE_SIDEBAR");
}

The issue is this calls it as soon as the site loads

I try this

export default function({ app, store }) {
  app.router.beforeEach((to, next) => {
    store.commit("TOGGLE_SIDEBAR");
    next();
  });
}

I get next is not a function.

How do I get this working?

Answer 1

As stated in the documentation router.beforeEach(...) expects a function with 3 arguments : to , from and next .

As you've passed only two arguments, the next argument you are trying to call is in fact the from Route.

Add a third parameter like below :

export default function({ app, store }) {
  app.router.beforeEach((to, from, next) => {
    store.commit("TOGGLE_SIDEBAR");
    next();
  });
}