1---
2category: Elements
3---
4 
5# useResizeObserver
6 
7Reports changes to the dimensions of an Element's content or the border-box
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useResizeObserver } from '@vueuse/core'
14import { ref, useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const text = ref('')
18 
19useResizeObserver(el, (entries) => {
20  const entry = entries[0]
21  const { width, height } = entry.contentRect
22  text.value = `width: ${width}, height: ${height}`
23})
24</script>
25 
26<template>
27  <div ref="el">
28    {{ text }}
29  </div>
30</template>
31```
32 
33## Directive Usage
34 
35```vue
36<script setup lang="ts">
37import { vResizeObserver } from '@vueuse/components'
38 
39const text = ref('')
40 
41function onResizeObserver(entries) {
42  const [entry] = entries
43  const { width, height } = entry.contentRect
44  text.value = `width: ${width}, height: ${height}`
45}
46</script>
47 
48<template>
49  <div v-resize-observer="onResizeObserver">
50    {{ text }}
51  </div>
52</template>
53```
54 
55[ResizeObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
56 
57## Type Declarations
58 
59```ts
60/**
61 * @deprecated This interface is now available in the DOM lib.
62 * Use the global {@link globalThis.ResizeObserverSize} instead.
63 */
64export interface ResizeObserverSize {
65  readonly inlineSize: number
66  readonly blockSize: number
67}
68/**
69 * @deprecated This interface is now available in the DOM lib.
70 * Use the global {@link globalThis.ResizeObserverEntry} instead.
71 */
72export interface ResizeObserverEntry {
73  readonly target: Element
74  readonly contentRect: DOMRectReadOnly
75  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>
76  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>
77  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>
78}
79/**
80 * @deprecated This interface is now available in the DOM lib.
81 * Use the global {@link globalThis.ResizeObserverCallback} instead.
82 */
83export type ResizeObserverCallback = (
84  entries: ReadonlyArray<ResizeObserverEntry>,
85  observer: ResizeObserver,
86) => void
87export interface UseResizeObserverOptions
88  extends ResizeObserverOptions, ConfigurableWindow {}
89export interface UseResizeObserverReturn extends Supportable {
90  stop: () => void
91}
92/**
93 * Reports changes to the dimensions of an Element's content or the border-box
94 *
95 * @see https://vueuse.org/useResizeObserver
96 * @param target
97 * @param callback
98 * @param options
99 */
100export declare function useResizeObserver(
101  target:
102    | MaybeComputedElementRef
103    | MaybeComputedElementRef[]
104    | MaybeRefOrGetter<MaybeElement[]>,
105  callback: globalThis.ResizeObserverCallback,
106  options?: UseResizeObserverOptions,
107): UseResizeObserverReturn
108```
109