Vue JS - How to get window size whenever it changes

Issue

I'm new to vuejs but I was trying to get the window size whenever I resize it so that i can compare it to some value for a function that I need to apply depending on the screen size. I also tried using the watch property but not sure how to handle it so that's probably why it didn't work

  methods: {

    elem() {
     this.size = window.innerWidth;
     return this.size;
   },
  mounted() {
    if (this.elem < 767){ //some code }
   }

Solution

Put this code inside your Vue component:

created() {
  window.addEventListener("resize", this.myEventHandler);
},
destroyed() {
  window.removeEventListener("resize", this.myEventHandler);
},
methods: {
  myEventHandler(e) {
    // your code for handling resize...
  }
}

This will register your Vue method on component creation, trigger myEventHandler when the browser window is resized, and free up memory once your component is destroyed.

Answered By - Goran