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

in Code Write a comment

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() {

3. Using jQuery trigger method

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

$(document).ready((function) {

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

Renat Galyamov

Want to share this with your friends?

A collection of UI components for
Bootstrap 4/5 and Vue.js

Get now

Write a Comment