[Vuejs]-Hide parent with v-onclick Vue 2.0. max-width: 767px

To show the menu according to screensize

You can use jquery to get browser viewport width.

 $(window).width(); 

Then write a function which will check screen width and return true/false.

showMenu() {
  let screenWidth = $(window).width()
  if (screenWidth < 767) {
    return true
  } else {
    return false
  }
}

To hide the menu

1. Use Vue Clickaway to check if someone clicks outside the menu.

2. Write before each navigation guard to hide the menu.

   router.beforeEach((to, from, next) => {
     this.hideMenu() // Hides the Menu
     next()
   })