Vue Use Utilities

# useWindowSize

useWindowSize

Reactive window size

# Example

💡 resize the browser and watch window size changed.

# Usage

<div class="wrapper">
  window size: {{ width }} x {{ height }}
</div>
1
2
3
import { useWindowSize } from '@vueblocks/vue-use-core'

export default {
  setup () {
    const { width, height } = useWindowSize()

    return {
      width,
      height
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

# Typing

interface WindowSize {
  width: Ref<number>;
  height: Ref<number>;
}

/**
 * Reactive window size
 * @param {boolean} useCapture
 * @param {boolean} useThrottle: true: throttle | false: debounce
 * @return {Ref<number>} WindowSize
 */
declare const useWindowSize: (
  useCapture?: boolean,
  useThrottle?: boolean
) => WindowSize;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

← useVuex →