How can I monitor changing window sizes in Vue?

by

To get the current window height of your browser as it changes, use this script:

new Vue({
  el: '#app',
  data() {
    return {
      windowHeight: window.innerHeight
    }
  },

  mounted() {
    this.$nextTick(() => {
      window.addEventListener('resize', this.onResize);
    })
  },

  beforeDestroy() { 
    window.removeEventListener('resize', this.onResize); 
  },

  methods: {  
    onResize() {
      this.windowHeight = window.innerHeight
    }
  }
});

To display the information, use:

<div id="app">
 Current height: {{ windowHeight }}
</div>

Leave a Comment