⬅️ Back to Table of Contents

📄 useElementSize

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	11
🟢 Vue Composition API	2
📐 Interfaces	3

📚 Table of Contents

• Imports
• Vue Composition API
• Functions
• Interfaces

🛠️ File Location:

📂 packages/core/useElementSize/index.ts

📦 Imports

Name	Source
ShallowRef	vue
MaybeComputedElementRef	../unrefElement
UseResizeObserverOptions	../useResizeObserver
toArray	@vueuse/shared
tryOnMounted	@vueuse/shared
computed	vue
shallowRef	vue
watch	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useResizeObserver	../useResizeObserver

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
watch	watch	none	none

---

Functions

useElementSize(target: MaybeComputedElementRef, initialSize: ElementSize, options: UseElementSizeOptions): UseElementSizeReturn

Reactive size of an HTML element.

See: https://vueuse.org/useElementSize

Raw JSDoc

/**
 * Reactive size of an HTML element.
 *
 * @see https://vueuse.org/useElementSize
 */

Calls:

• computed (from vue)
• unrefElement(target)?.namespaceURI?.includes
• shallowRef (from vue)
• useResizeObserver (from ../useResizeObserver)
• unrefElement (from ../unrefElement)
• $elem.getBoundingClientRect
• toArray (from @vueuse/shared)
• formatBoxSize.reduce
• tryOnMounted (from @vueuse/shared)
• window.getComputedStyle
• Number.parseFloat
• watch (from vue)
• stop1
• stop2

Internal Comments:

// fallback (x4)

Code

export function useElementSize(
  target: MaybeComputedElementRef,
  initialSize: ElementSize = { width: 0, height: 0 },
  options: UseElementSizeOptions = {},
): UseElementSizeReturn {
  const { window = defaultWindow, box = 'content-box' } = options
  const isSVG = computed(() => unrefElement(target)?.namespaceURI?.includes('svg'))
  const width = shallowRef(initialSize.width)
  const height = shallowRef(initialSize.height)

  const { stop: stop1 } = useResizeObserver(
    target,
    ([entry]) => {
      const boxSize = box === 'border-box'
        ? entry.borderBoxSize
        : box === 'content-box'
          ? entry.contentBoxSize
          : entry.devicePixelContentBoxSize

      if (window && isSVG.value) {
        const $elem = unrefElement(target)
        if ($elem) {
          const rect = $elem.getBoundingClientRect()
          width.value = rect.width
          height.value = rect.height
        }
      }
      else {
        if (boxSize) {
          const formatBoxSize = toArray(boxSize)
          width.value = formatBoxSize.reduce((acc, { inlineSize }) => acc + inlineSize, 0)
          height.value = formatBoxSize.reduce((acc, { blockSize }) => acc + blockSize, 0)
        }
        else {
          // fallback
          width.value = entry.contentRect.width
          height.value = entry.contentRect.height
        }
      }
    },
    options,
  )

  tryOnMounted(() => {
    const ele = unrefElement(target)
    if (ele && 'offsetWidth' in ele) {
      if (box === 'content-box' && window) {
        const cs = window.getComputedStyle(ele)
        const padX = Number.parseFloat(cs.paddingLeft) + Number.parseFloat(cs.paddingRight)
        const padY = Number.parseFloat(cs.paddingTop) + Number.parseFloat(cs.paddingBottom)
        const bdX = Number.parseFloat(cs.borderLeftWidth) + Number.parseFloat(cs.borderRightWidth)
        const bdY = Number.parseFloat(cs.borderTopWidth) + Number.parseFloat(cs.borderBottomWidth)
        width.value = ele.offsetWidth - padX - bdX
        height.value = ele.offsetHeight - padY - bdY
      }
      else {
        width.value = ele.offsetWidth
        height.value = ele.offsetHeight
      }
    }
    else if (ele) {
      width.value = initialSize.width
      height.value = initialSize.height
    }
  })

  const stop2 = watch(
    () => unrefElement(target),
    (ele) => {
      width.value = ele ? initialSize.width : 0
      height.value = ele ? initialSize.height : 0
    },
  )

  function stop() {
    stop1()
    stop2()
  }

  return {
    width,
    height,
    stop,
  }
}

Internal helpers

Declared inside another function in this file.

stop(): void

Returns: void

Calls:

• stop1
• stop2

Code

function stop() {
    stop1()
    stop2()
  }

---

Interfaces

ElementSize

Interface Code

export interface ElementSize {
  width: number
  height: number
}

Properties

Name	Type	Optional	Description
width	number	✗	not shown
height	number	✗	not shown

UseElementSizeOptions

Interface Code

export interface UseElementSizeOptions extends UseResizeObserverOptions {
}

UseElementSizeReturn

Interface Code

export interface UseElementSizeReturn {
  width: ShallowRef<number>
  height: ShallowRef<number>
  stop: () => void
}

Properties

Name	Type	Optional	Description
width	ShallowRef<number>	✗	not shown
height	ShallowRef<number>	✗	not shown
stop	() => void	✗	not shown

---

Generated by Syntax Scribe