Sometimes, we want to get the window size in Vue.js.

In this article, we’ll look at how to get the window size in Vue.js.

How to get the window size in Vue.js?

To get the window size in Vue.js, we can listen to the resize event.

For instance, we write

<script>
//...
export default {
  //...
  mounted() {
    window.addEventListener("resize", () => {
      this.windowHeight = window.innerHeight;
    });
  },
  //...
};
</script>

to call window.addEventListener with 'resize' to listen to the window resize event.

In the event handler callback, we get the window’s height with window.innerHeight.

Conclusion

To get the window size in Vue.js, we can listen to the resize event.