How to Handle Window Resize Events in Vue

Sep 1, 2021

To handle the window resize event in Vue, you have a couple options.

Add an Event Listener

You can register an event listener for the window resize event using addEventListener() when Vue mounts the component. You should also clean up the event listener when the component is unmounted. Here is a live demonstration with the HTML template:

const app = new Vue({
  data: () => ({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  }),
  mounted() {
    window.addEventListener('resize', this.getDimensions);
  },
  unmounted() {
    window.removeEventListener('resize', this.getDimensions);
  },
  methods: {
    getDimensions() {
      this.width = document.documentElement.clientWidth;
      this.height = document.documentElement.clientHeight;
    }
  }
})
<div id="app2">
  <p>The window width and height are respectively {{width}}, {{height}}</p>
</div>

The window width and height are respectively {{width}}, {{height}}

The downside is that any component that needs to listen to the resize event needs to register global events. That's fine for a one-off, but can get messy if multiple components needs to listen to the resize event. Directives are an alternative approach that enable multiple components to listen to the resize event without accessing the window.

Create a Vue Directive

Similar to creating a custom scroll event, you can create a directive for window resizing.

Vue.directive('resize', {
  inserted: function(el, binding) {
    const onResizeCallback = binding.value;
    window.addEventListener('resize', () => {
      const width = document.documentElement.clientWidth;
      const height = document.documentElement.clientHeight;
      onResizeCallback({ width, height });
    })
  }
});

const app = new Vue({
  data: {
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  },
  methods: {
    setDimensions: function({ width, height }) {
      this.width = width;
      this.height = height;
    }
  },
  template: `
    <div id="app">
      <div v-resize="setDimensions">
        <p>the width and height are respectively {{width}}, {{height}} </p>
      </div>
    </div>
  `
});

Here is a live demonstration with the HTML template:

<div id="app">
  <div v-resize="setDimensions">
    <p>The window width and height are respectively {{width}}, {{height}} </p>
  </div>
</div>

The window width and height are respectively {{width}}, {{height}}


Vue School has some of our favorite Vue video courses. Their Vue.js Master Class walks you through building a real world application, and does a great job of teaching you how to integrate Vue with Firebase. Check it out!


Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Vue Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!