useElementSize ​

An element's rendered width and height, kept up to date with a ResizeObserver. The charts use it to draw in real pixels.

<script setup lang="ts">
import { useElementSize } from 'iryx-ui'
import { ref } from 'vue'

const box = ref<HTMLElement>()
const { width, height } = useElementSize(box)
</script>

<template>
  <div ref="box">
    {{ width }} × {{ height }}
  </div>
</template>

Notes ​

The size is seeded from layout before the observer first fires, so the first frame draws at the real width rather than at zero — and where ResizeObserver is missing, that seed is the measurement.

One observer is kept per element, disconnected when the target changes or the component unmounts.