useWindowSize
Reactive window size
Demo
Infinity x Infinity
Usage
import { useWindowSize } from '@vueuse/core'
const { width, height } = useWindowSize()
import { useWindowSize } from '@vueuse/core'
const { width, height } = useWindowSize()
Component
This function also provides a renderless component version via the@vueuse/components package. Learn more about the usage. <UseWindowSize v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseWindowSize>
<UseWindowSize v-slot="{ width, height }">
Width: {{ width }}
Height: {{ height }}
</UseWindowSize>
Type Declarations
export interface WindowSizeOptions extends ConfigurableWindow {
initialWidth?: number
initialHeight?: number
}
/**
* Reactive window size.
*
* @see https://vueuse.org/useWindowSize
* @param options
*/
export declare function useWindowSize({
window,
initialWidth,
initialHeight,
}?: WindowSizeOptions): {
width: Ref<number>
height: Ref<number>
}
export declare type UseWindowSizeReturn = ReturnType<typeof useWindowSize>
export interface WindowSizeOptions extends ConfigurableWindow {
initialWidth?: number
initialHeight?: number
}
/**
* Reactive window size.
*
* @see https://vueuse.org/useWindowSize
* @param options
*/
export declare function useWindowSize({
window,
initialWidth,
initialHeight,
}?: WindowSizeOptions): {
width: Ref<number>
height: Ref<number>
}
export declare type UseWindowSizeReturn = ReturnType<typeof useWindowSize>
Source
Contributors
Anthony Fu
Antério Vieira
Shinigami
wheat
Alex Kozack
Roman Pavlov