VueUseuseWindowSize
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/componentspackage. 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 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 type UseWindowSizeReturn = ReturnType<typeof useWindowSize>
Source
Contributors
Anthony Fu
Jelf
Antério Vieira
vaakian X
vaakian X
Shinigami
wheat
Alex Kozack
Roman Pavlov