Skip to content

useWindowSize ​

Category
Export Size
964 B
Last Changed
last month

Reactive window size

Demo ​

Infinity x Infinity

Usage ​

js
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.

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

Type Declarations ​

typescript
export interface UseWindowSizeOptions extends ConfigurableWindow {
  initialWidth?: number
  initialHeight?: number
  /**
   * Listen to window `orientationchange` event
   *
   * @default true
   */
  listenOrientation?: boolean
  /**
   * Whether the scrollbar should be included in the width and height
   * Only effective when `type` is `'inner'`
   *
   * @default true
   */
  includeScrollbar?: boolean
  /**
   * Use `window.innerWidth` or `window.outerWidth`
   *
   * @default 'inner'
   */
  type?: "inner" | "outer"
}
/**
 * Reactive window size.
 *
 * @see https://vueuse.org/useWindowSize
 * @param options
 */
export declare function useWindowSize(options?: UseWindowSizeOptions): {
  width: Ref<number, number>
  height: Ref<number, number>
}
export type UseWindowSizeReturn = ReturnType<typeof useWindowSize>

Source ​

Source • Demo • Docs

Contributors ​

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

Changelog ​

v11.0.0-beta.2 on 7/17/2024
bfba3 - feat: add ability to get outer sizes of the window (#3999)
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)

Released under the MIT License.