useElementBounding

Demo

Resize the box to see changes

Usage

vue

<script setup lang="ts"> import { useElementBounding } from '@vueuse/core' import { useTemplateRef } from 'vue'  const el = useTemplateRef('el') const { x, y, top, right, bottom, left, width, height } = useElementBounding(el) </script>  <template>  <div ref="el" /> </template>

Component Usage

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

vue

<template>  <UseElementBounding v-slot="{ width, height }">  Width: {{ width }} Height: {{ height }}  </UseElementBounding> </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 { vElementBounding } from '@vueuse/components'  interface BoundingType {  height: number  bottom: number  left: number  right: number  top: number  width: number  x: number  y: number }  function onBounding({ height, bottom, left, right, top, width, x, y }: BoundingType) {  console.log(height, bottom, left, right, top, width, x, y) }  const options = {  reset: true,  windowResize: true,  windowScroll: true,  immediate: true,  updateTiming: 'sync', } </script>  <template>  <textarea v-element-bounding="onBounding" />  <!-- with options -->  <textarea v-element-bounding="[onBounding, options]" /> </template>

Type Declarations

Show Type Declarations

export interface UseElementBoundingOptions {  /**  * Reset values to 0 on component unmounted  *  * @default true  */  reset?: boolean  /**  * Listen to window resize event  *  * @default true  */  windowResize?: boolean  /**  * Listen to window scroll event  *  * @default true  */  windowScroll?: boolean  /**  * Immediately call update on component mounted  *  * @default true  */  immediate?: boolean  /**  * Timing to recalculate the bounding box  *  * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}  * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.  *  * @default 'sync'  */  updateTiming?: "sync" | "next-frame" } /**  * Reactive bounding box of an HTML element.  *  * @see https://vueuse.org/useElementBounding  * @param target  */ export declare function useElementBounding(  target: MaybeComputedElementRef,  options?: UseElementBoundingOptions, ): {  height: ShallowRef<number, number>  bottom: ShallowRef<number, number>  left: ShallowRef<number, number>  right: ShallowRef<number, number>  top: ShallowRef<number, number>  width: ShallowRef<number, number>  x: ShallowRef<number, number>  y: ShallowRef<number, number>  update: () => void } export type UseElementBoundingReturn = ReturnType<typeof useElementBounding>