Categories
Vue Answers

How to get the window size in Vue.js?

Spread the love

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.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *