Skip to content

useResizeObserver

Category
Export Size
520 B
Last Changed
yesterday

Reports changes to the dimensions of an Element's content or the border-box

Demo

Resize the box to see changes

Usage

vue
<script setup>
import { useResizeObserver } from '@vueuse/core'
import { ref } from 'vue'

const el = ref(null)
const text = ref('')

useResizeObserver(el, (entries) => {
  const entry = entries[0]
  const { width, height } = entry.contentRect
  text.value = `width: ${width}, height: ${height}`
})
</script>

<template>
  <div ref="el">
    {{ text }}
  </div>
</template>

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

vue
<script setup lang="ts">
import { vResizeObserver } from '@vueuse/components'

const text = ref('')

function onResizeObserver(entries) {
  const [entry] = entries
  const { width, height } = entry.contentRect
  text.value = `width: ${width}, height: ${height}`
}
</script>

<template>
  <div v-resize-observer="onResizeObserver">
    {{ text }}
  </div>
</template>

ResizeObserver MDN

Type Declarations

Show Type Declarations
typescript
export interface ResizeObserverSize {
  readonly inlineSize: number
  readonly blockSize: number
}
export interface ResizeObserverEntry {
  readonly target: Element
  readonly contentRect: DOMRectReadOnly
  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>
}
export type ResizeObserverCallback = (
  entries: ReadonlyArray<ResizeObserverEntry>,
  observer: ResizeObserver,
) => void
export interface UseResizeObserverOptions extends ConfigurableWindow {
  /**
   * Sets which box model the observer will observe changes to. Possible values
   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
   *
   * @default 'content-box'
   */
  box?: ResizeObserverBoxOptions
}
declare class ResizeObserver {
  constructor(callback: ResizeObserverCallback)
  disconnect(): void
  observe(target: Element, options?: UseResizeObserverOptions): void
  unobserve(target: Element): void
}
/**
 * Reports changes to the dimensions of an Element's content or the border-box
 *
 * @see https://vueuse.org/useResizeObserver
 * @param target
 * @param callback
 * @param options
 */
export declare function useResizeObserver(
  target:
    | MaybeComputedElementRef
    | MaybeComputedElementRef[]
    | MaybeRefOrGetter<MaybeElement[]>,
  callback: ResizeObserverCallback,
  options?: UseResizeObserverOptions,
): {
  isSupported: ComputedRef<boolean>
  stop: () => void
}
export type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>

Source

SourceDemoDocs

Contributors

Anthony Fu
Anthony Fu
Jelf
Hongkun
青椒肉丝
远方os
birdxiao
acyza
ByMykel
vaakian X
karma
Shinigami
Alex Kozack
Jacob Clevenger
Sanxiaozhizi
Antério Vieira
zhong666

Changelog

Pending for release...
59f75 - feat(toValue): deprecate toValue from @vueuse/shared in favor of Vue's native
v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
v11.1.0 on 9/16/2024
044dd - fix: update type (#4218)
v11.0.0-beta.2 on 7/17/2024
d4310 - feat: added vResizeObserver directive (#4008)
1c124 - fix: fix target is Ref Array (#4005)
v10.8.0 on 2/20/2024
48421 - fix: do not watch deep to avoid cicular calls (#3753)
v10.0.0-beta.2 on 3/28/2023
3e187 - feat: support element list (#2841)

Released under the MIT License.