Window Size

This API provides access to the width and height of the browser window.

State

The useWindowSize function exposes the following reactive state:

import { useWindowSize } from 'vue-use-web';

const { width, height } = useWindowSize();

State	Type	Description
width	Number	The client window width in pixels.
height	Number	The client window height in pixels.

Note!

By default the updates to the state are throttled by 100ms to keep things snappy but you can configure that.

Config

useWindowSize function takes an options object as an optional parameter.

import { useWindowSize } from 'vue-use-web';

const { width, height } = useWindowSize({
  throttleMs: 100
});

Config	Type	Description
throttleMs	Number	The debounce rate of the updates to the state.

Example

<template>
  <div>
    <div>
      <div>width: {{ width }}</div>
      <div>height: {{ height }}</div>
    </div>
  </div>
</template>

<script>
import { useWindowSize } from 'vue-use-web';

export default {
  setup() {
    const { width, height } = useWindowSize();

    return {
      width,
      height
    };
  }
};
</script>