1---
2category: Elements
3---
4 
5# useElementBounding
6 
7Reactive [bounding box](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) of an HTML element
8 
9## Usage
10 
11```vue
12<script setup lang="ts">
13import { useElementBounding } from '@vueuse/core'
14import { useTemplateRef } from 'vue'
15 
16const el = useTemplateRef('el')
17const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)
18</script>
19 
20<template>
21  <div ref="el" />
22</template>
23```
24 
25## Component Usage
26 
27```vue
28<template>
29  <UseElementBounding v-slot="{ width, height }">
30    Width: {{ width }} Height: {{ height }}
31  </UseElementBounding>
32</template>
33```
34 
35## Directive Usage
36 
37```vue
38<script setup lang="ts">
39import { vElementBounding } from '@vueuse/components'
40 
41interface BoundingType {
42  height: number
43  bottom: number
44  left: number
45  right: number
46  top: number
47  width: number
48  x: number
49  y: number
50}
51 
52function onBounding({ height, bottom, left, right, top, width, x, y }: BoundingType) {
53  console.log(height, bottom, left, right, top, width, x, y)
54}
55 
56const options = {
57  reset: true,
58  windowResize: true,
59  windowScroll: true,
60  immediate: true,
61  updateTiming: 'sync',
62}
63</script>
64 
65<template>
66  <textarea v-element-bounding="onBounding" />
67  <!-- with options -->
68  <textarea v-element-bounding="[onBounding, options]" />
69</template>
70```
71 
72## Type Declarations
73 
74```ts
75export interface UseElementBoundingOptions {
76  /**
77   * Reset values to 0 on component unmounted
78   *
79   * @default true
80   */
81  reset?: boolean
82  /**
83   * Listen to window resize event
84   *
85   * @default true
86   */
87  windowResize?: boolean
88  /**
89   * Listen to window scroll event
90   *
91   * @default true
92   */
93  windowScroll?: boolean
94  /**
95   * Immediately call update on component mounted
96   *
97   * @default true
98   */
99  immediate?: boolean
100  /**
101   * Timing to recalculate the bounding box
102   *
103   * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
104   * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
105   *
106   * @default 'sync'
107   */
108  updateTiming?: "sync" | "next-frame"
109}
110export interface UseElementBoundingReturn {
111  height: ShallowRef<number>
112  bottom: ShallowRef<number>
113  left: ShallowRef<number>
114  right: ShallowRef<number>
115  top: ShallowRef<number>
116  width: ShallowRef<number>
117  x: ShallowRef<number>
118  y: ShallowRef<number>
119  update: () => void
120}
121/**
122 * Reactive bounding box of an HTML element.
123 *
124 * @see https://vueuse.org/useElementBounding
125 * @param target
126 */
127export declare function useElementBounding(
128  target: MaybeComputedElementRef,
129  options?: UseElementBoundingOptions,
130): UseElementBoundingReturn
131```
132