Skip to content
On this page

useWindowSize

Category
Export Size
1.16 kB
Last Changed
3 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>

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
   * @default true
   */
  includeScrollbar?: boolean
}
/**
 * Reactive window size.
 *
 * @see https://vueuse.org/useWindowSize
 * @param options
 */
export declare function useWindowSize(options?: UseWindowSizeOptions): {
  width: Ref<number>
  height: Ref<number>
}
export declare type UseWindowSizeReturn = ReturnType<typeof useWindowSize>
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
   * @default true
   */
  includeScrollbar?: boolean
}
/**
 * Reactive window size.
 *
 * @see https://vueuse.org/useWindowSize
 * @param options
 */
export declare function useWindowSize(options?: UseWindowSizeOptions): {
  width: Ref<number>
  height: Ref<number>
}
export declare type UseWindowSizeReturn = ReturnType<typeof useWindowSize>

Source

SourceDemoDocs

Contributors

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

Changelog

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)
v7.0.2 on 11/23/2021
42ae4 - fix: improve SSR

Released under the MIT License.