useResizeObserver
A composable for detecting element size changes using the Resize Observer API with automatic cleanup.
Usage
The useResizeObserver composable wraps the Resize Observer API to detect when an element’s dimensions change. It’s useful for responsive components, charts, virtualized lists, and aspect ratio maintenance.
Why wrap ResizeObserver? The native ResizeObserver has no awareness of Vue’s effectScope lifecycle. If you create one inside a composable, it won’t automatically disconnect when the scope is disposed. useResizeObserver integrates onScopeDispose for automatic cleanup, defers creation until after hydration for SSR safety, and adds reactive target tracking — things the native API can’t do on its own.
<script setup lang="ts">
import { useResizeObserver } from '@vuetify/v0'
import { ref, useTemplateRef } from 'vue'
const container = useTemplateRef('container')
const width = ref(0)
const height = ref(0)
useResizeObserver(container, (entries) => {
const entry = entries[0]
width.value = entry.contentRect.width
height.value = entry.contentRect.height
})
</script>
<template>
<div ref="container" class="resizable">
<p>Width: {{ width }}px</p>
<p>Height: {{ height }}px</p>
</div>
</template>Architecture
useResizeObserver wraps the native ResizeObserver API with Vue reactivity:
Options
| Option | Type | Default | Notes |
|---|---|---|---|
immediate | boolean | false | Fire the callback immediately on mount before any resize |
once | boolean | false | Stop observing after the first callback fires |
box | 'content-box' | 'border-box' | 'content-box' | Which box model to observe |
Reactivity
| Property/Method | Reactive | Notes |
|---|---|---|
isActive | Computed from observer ref | |
isPaused | ShallowRef, readonly | |
target | Accepts MaybeRef, watched for changes | |
pause() | — | Temporarily stop observing without disconnecting |
resume() | — | Resume after pause() |
stop() | — | Disconnect the observer permanently |
useElementSize
| Property/Method | Reactive | Notes |
|---|---|---|
width | ShallowRef | |
height | ShallowRef |
Examples
Responsive Grid
A manually resizable container that adapts from 1 to 3 columns based on its own width, with live dimension readout.
Drag the right edge to resize. Columns: 1
Functions
useResizeObserver
(target: MaybeElementRef, callback: (entries: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions) => UseResizeObserverReturnA composable that uses the Resize Observer API to detect when an element's size changes.
useElementSize
(target: MaybeElementRef) => UseElementSizeReturnA convenience composable that uses the Resize Observer API to track an element's size.
Options
Properties
isActive
Readonly<Ref<boolean, boolean>>Whether the observer is currently active (created and observing)