How to trigger window resize using Vue.js/JavaScript/jQuery

In this tutorial, you’ll learn how to manually trigger window resize in Vue.js, JavaScript and jQuery.

1. Using plain JavaScript

window.dispatchEvent(new Event('resize'));

2. Using Vue.js

You can use the JavaScript resize event as it is or wrap it in it’s own function. I personally prefer to have it as a separate function.

methods: {
  resizeWindow() {
    window.dispatchEvent(new Event('resize'))
  }
},
mounted() {
  this.resizeWindow()
}

3. Using jQuery trigger method

jQuery has a built-in .trigger method, which you can use to resize the window.

$(document).ready((function) {
  $(window).trigger('resize');
});

I hope you learned something new today. And if you did, please leave a comment and check other Vue.js tutorials.

Cheers,
Renat Galyamov

Want to share this with your friends?
👉renatello.com/vue-js-resize-window