[Integration] useResizeObserver system composable

[johnleider]

Summary

Integration improvements for useResizeObserver with the v0 system.

Research Findings

v0 Implementation (Production-Ready)

Core Features:

• Lifecycle Management: pause(), resume(), stop()
• State Tracking: isActive, isPaused
• Hydration-Aware: Uses useHydration() for SSR safety
• Once Mode: Auto-stops after first observation
• Immediate Option: Calls with initial bounding rect
• Box Option: content-box or border-box
• Convenience Wrapper: useElementSize() returns width and height refs

Vuetify 3 Comparison

Feature	v0	Vuetify 3
Pause/resume	✅	❌
State tracking	✅ isActive, isPaused	❌
Once mode	✅	❌
Hydration guard	✅ useHydration()	⚠️ IN_BROWSER only
Box option	✅	✅
Lines of code	296	52

Vuetify 3 Usage

Widely adopted across 11+ components:

• VColorPickerCanvas, VSlideGroup, VPagination
• VFooter, VProgressCircular, VProgressLinear
• VParallax, VVirtualScrollItem, VFab
• useVirtual, useLayout

V3 Pattern:

const { resizeRef, contentRect } = useResizeObserver()
computed(() => contentRect.value?.width)

v0 Pattern (enhanced):

const { width, height } = useElementSize(targetRef)
// Or with full control:
const { isActive, pause, resume } = useResizeObserver(
  targetRef,
  (entries) => handleResize(entries),
  { immediate: true, box: 'border-box' }
)

Integration Points

• Integration with useOverflow for container measurement
• Integration with useVirtual for dynamic sizing
• Consistent observer patterns with other observers
• SSR safety via useHydration
• Document pause/resume for performance optimization
• Add observer pooling consideration for v0.3.0

Status

✅ Production-ready - Superset of V3 features

[johnleider]

Closed — implementation is production-ready and integrated into Vuetify via PR vuetifyjs/vuetify#22672. Remaining items split out: observer pooling moved to #153 (v0.3.0), docs task tracked separately.