Resize the box to see changes
useElementBounding
Reactive bounding box of an HTML element
Usage
<template>
<div ref="el" />
</template>
<script>
import { ref } from 'vue'
import { useElementBounding } from '@vueuse/core'
export default {
setup() {
const el = ref(null)
const { x, y, top, right, bottom, left, width, height } = useElementBounding(el)
return {
el,
/* ... */
}
}
})
</script>
Type Declarations
/**
* Reactive size of an HTML element.
*
* @see /useElementSize
* @param target
* @param callback
* @param options
*/
export declare function useElementBounding(
target: MaybeElementRef,
options?: ResizeObserverOptions
): {
x: Ref<number>
y: Ref<number>
top: Ref<number>
right: Ref<number>
bottom: Ref<number>
left: Ref<number>
width: Ref<number>
height: Ref<number>
}