Skip to content

useWindowSize

Category
Export Size
964 B
Last Changed
2 months ago

Reactive window size

Demo

Infinity x Infinity

Usage

js
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()
import { useWindowSize } from '@vueuse/core'

const { width, height } = useWindowSize()

Component Usage

This function also provides a renderless component version via the @vueuse/components package. Learn more about the usage.

html
<UseWindowSize v-slot="{ width, height }">
  Width: {{ width }}
  Height: {{ height }}
</UseWindowSize>
<UseWindowSize v-slot="{ width, height }">
  Width: {{ width }}
  Height: {{ height }}
</UseWindowSize>

Source

SourceDemoDocs

Contributors

Anthony Fu
Jelf
Antério Vieira
Indrek Ardel
Zhousg
vaakian X
vaakian X
Shinigami
wheat
Alex Kozack
Roman Pavlov

Changelog

v10.0.0-beta.3 on 4/12/2023
4e7b0 - fix!: use media query instead of orientationchange listener (#2919)
v9.11.0 on 1/17/2023
d5321 - fix(components): mark defineComponent as pure (#2623)
v9.2.0 on 9/5/2022
d278f - feat: support includeScrollbar (#2161)
v8.9.3 on 7/14/2022
adf3a - fix!: rename type WindowSizeOptions to UseWindowSizeOptions (#1897)
v8.8.0 on 7/6/2022
c3f95 - feat: listen to the orientationchange event (#1609)

Released under the MIT License.