1---
2category: Elements
3---
4 
5# useWindowSize
6 
7Reactive window size
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useWindowSize } from '@vueuse/core'
14 
15const { width, height } = useWindowSize()
16</script>
17 
18<template>
19  <div>
20    Width: {{ width }}
21    Height: {{ height }}
22  </div>
23</template>
24```
25 
26## Component Usage
27 
28```vue
29<template>
30  <UseWindowSize v-slot="{ width, height }">
31    Width: {{ width }}
32    Height: {{ height }}
33  </UseWindowSize>
34</template>
35```
36 
37## Type Declarations
38 
39```ts
40export interface UseWindowSizeOptions extends ConfigurableWindow {
41  initialWidth?: number
42  initialHeight?: number
43  /**
44   * Listen to window `orientationchange` event
45   *
46   * @default true
47   */
48  listenOrientation?: boolean
49  /**
50   * Whether the scrollbar should be included in the width and height
51   * Only effective when `type` is `'inner'`
52   *
53   * @default true
54   */
55  includeScrollbar?: boolean
56  /**
57   * Use `window.innerWidth` or `window.outerWidth` or `window.visualViewport`
58   * visualViewport documentation from MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/VisualViewport)
59   * @default 'inner'
60   */
61  type?: "inner" | "outer" | "visual"
62}
63export interface UseWindowSizeReturn {
64  width: ShallowRef<number>
65  height: ShallowRef<number>
66}
67/**
68 * Reactive window size.
69 *
70 * @see https://vueuse.org/useWindowSize
71 * @param options
72 *
73 * @__NO_SIDE_EFFECTS__
74 */
75export declare function useWindowSize(
76  options?: UseWindowSizeOptions,
77): UseWindowSizeReturn
78```
79