⬅️ Back to Table of Contents

📄 useWindowSize

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	8
🟢 Vue Composition API	1
📐 Interfaces	2

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useWindowSize/index.ts

📦 Imports

Name	Source
ShallowRef	vue
ConfigurableWindow	../_configurable
tryOnMounted	@vueuse/shared
shallowRef	vue
watch	vue
defaultWindow	../_configurable
useEventListener	../useEventListener
useMediaQuery	../useMediaQuery

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

useWindowSize(options: UseWindowSizeOptions): UseWindowSizeReturn

Reactive window size.

Parameters:

• options any: No description

See: https://vueuse.org/useWindowSize

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactive window size.
 *
 * @see https://vueuse.org/useWindowSize
 * @param options
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• shallowRef (from vue)
• Math.round
• update
• tryOnMounted (from @vueuse/shared)
• useEventListener (from ../useEventListener)
• useMediaQuery (from ../useMediaQuery)
• watch (from vue)

Code

export function useWindowSize(options: UseWindowSizeOptions = {}): UseWindowSizeReturn {
  const {
    window = defaultWindow,
    initialWidth = Number.POSITIVE_INFINITY,
    initialHeight = Number.POSITIVE_INFINITY,
    listenOrientation = true,
    includeScrollbar = true,
    type = 'inner',
  } = options

  const width = shallowRef(initialWidth)
  const height = shallowRef(initialHeight)

  const update = () => {
    if (window) {
      if (type === 'outer') {
        width.value = window.outerWidth
        height.value = window.outerHeight
      }
      else if (type === 'visual' && window.visualViewport) {
        const { width: visualViewportWidth, height: visualViewportHeight, scale } = window.visualViewport
        width.value = Math.round(visualViewportWidth * scale)
        height.value = Math.round(visualViewportHeight * scale)
      }
      else if (includeScrollbar) {
        width.value = window.innerWidth
        height.value = window.innerHeight
      }
      else {
        width.value = window.document.documentElement.clientWidth
        height.value = window.document.documentElement.clientHeight
      }
    }
  }

  update()
  tryOnMounted(update)

  const listenerOptions = { passive: true }
  useEventListener('resize', update, listenerOptions)

  if (window && type === 'visual' && window.visualViewport) {
    useEventListener(window.visualViewport, 'resize', update, listenerOptions)
  }

  if (listenOrientation) {
    const matches = useMediaQuery('(orientation: portrait)')
    watch(matches, () => update())
  }

  return { width, height }
}

Internal helpers

Declared inside another function in this file.

update(): void

Returns: void

Calls:

• Math.round

Code

() => {
    if (window) {
      if (type === 'outer') {
        width.value = window.outerWidth
        height.value = window.outerHeight
      }
      else if (type === 'visual' && window.visualViewport) {
        const { width: visualViewportWidth, height: visualViewportHeight, scale } = window.visualViewport
        width.value = Math.round(visualViewportWidth * scale)
        height.value = Math.round(visualViewportHeight * scale)
      }
      else if (includeScrollbar) {
        width.value = window.innerWidth
        height.value = window.innerHeight
      }
      else {
        width.value = window.document.documentElement.clientWidth
        height.value = window.document.documentElement.clientHeight
      }
    }
  }

---

Interfaces

UseWindowSizeOptions

Interface Code

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` or `window.visualViewport`
   * visualViewport documentation from MDN(https://developer.mozilla.org/zh-CN/docs/Web/API/VisualViewport)
   * @default 'inner'
   */
  type?: 'inner' | 'outer' | 'visual'
}

Properties

Name	Type	Optional	Description
initialWidth	number	✓	not shown
initialHeight	number	✓	not shown
listenOrientation	boolean	✓	not shown
includeScrollbar	boolean	✓	not shown
type	'inner' \| 'outer' \| 'visual'	✓	not shown

UseWindowSizeReturn

Interface Code

export interface UseWindowSizeReturn {
  width: ShallowRef<number>
  height: ShallowRef<number>
}

Properties

Name	Type	Optional	Description
width	ShallowRef<number>	✗	not shown
height	ShallowRef<number>	✗	not shown

---

Generated by Syntax Scribe