1---
2category: Elements
3---
4 
5# useElementSize
6 
7Reactive size of an HTML element. [ResizeObserver MDN](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useElementSize } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const { width, height } = useElementSize(el)
18</script>
19 
20<template>
21  <div ref="el">
22    Height: {{ height }}
23    Width: {{ width }}
24  </div>
25</template>
26```
27 
28## Component Usage
29 
30```vue
31<template>
32  <UseElementSize v-slot="{ width, height }">
33    Width: {{ width }} Height: {{ height }}
34  </UseElementSize>
35</template>
36```
37 
38## Directive Usage
39 
40```vue
41<script setup lang="ts">
42import { vElementSize } from '@vueuse/components'
43 
44function onResize({ width, height }: { width: number, height: number }) {
45  console.log(width, height)
46}
47</script>
48 
49<template>
50  <textarea v-element-size="onResize" />
51  <!-- with options -->
52  <textarea v-element-size="[onResize, { width: 100, height: 100 }, { box: 'content-box' }]" />
53</template>
54```
55 
56## Type Declarations
57 
58```ts
59export interface ElementSize {
60  width: number
61  height: number
62}
63export interface UseElementSizeOptions extends UseResizeObserverOptions {}
64export interface UseElementSizeReturn {
65  width: ShallowRef<number>
66  height: ShallowRef<number>
67  stop: () => void
68}
69/**
70 * Reactive size of an HTML element.
71 *
72 * @see https://vueuse.org/useElementSize
73 */
74export declare function useElementSize(
75  target: MaybeComputedElementRef,
76  initialSize?: ElementSize,
77  options?: UseElementSizeOptions,
78): UseElementSizeReturn
79```
80