# 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>