⬅️ Back to Table of Contents

📄 index.ts

📊 Analysis Summary

Metric	Count
🔧 Functions	6
🧱 Classes	1
📦 Imports	11
📊 Variables & Constants	1
🟢 Vue Composition API	2
📐 Interfaces	3
📑 Type Aliases	2

📚 Table of Contents

• Imports
• Variables & Constants
• Vue Composition API
• Functions
• Classes
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useResizeObserver/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
ConfigurableWindow	../_configurable
MaybeComputedElementRef	../unrefElement
MaybeElement	../unrefElement
tryOnScopeDispose	@vueuse/shared
computed	vue
toValue	vue
watch	vue
defaultWindow	../_configurable
unrefElement	../unrefElement
useSupported	../useSupported

---

Variables & Constants

Name	Type	Kind	Value	Exported
observer	ResizeObserver | undefined	let/var	*not shown*	✗

---

Vue Composition API

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

---

Functions

ResizeObserver.disconnect(): void

Code

disconnect(): void

• Return Type: void

ResizeObserver.observe(target: Element, options: UseResizeObserverOptions): void

Code

observe(target: Element, options?: UseResizeObserverOptions): void

• Parameters:
• target: Element
• options: UseResizeObserverOptions
• Return Type: void

ResizeObserver.unobserve(target: Element): void

Code

unobserve(target: Element): void

• Parameters:
• target: Element
• Return Type: void

useResizeObserver(target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>, callback: ResizeObserverCallback, options: UseResizeObserverOptions): { isSupported: any; stop: () => void; }

Code

export function useResizeObserver(
  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
  callback: ResizeObserverCallback,
  options: UseResizeObserverOptions = {},
) {
  const { window = defaultWindow, ...observerOptions } = options
  let observer: ResizeObserver | undefined
  const isSupported = useSupported(() => window && 'ResizeObserver' in window)

  const cleanup = () => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

  const targets = computed(() => {
    const _targets = toValue(target)
    return Array.isArray(_targets)
      ? _targets.map(el => unrefElement(el))
      : [unrefElement(_targets)]
  })

  const stopWatch = watch(
    targets,
    (els) => {
      cleanup()
      if (isSupported.value && window) {
        observer = new ResizeObserver(callback)
        for (const _el of els) {
          if (_el)
            observer!.observe(_el, observerOptions)
        }
      }
    },
    { immediate: true, flush: 'post' },
  )

  const stop = () => {
    cleanup()
    stopWatch()
  }

  tryOnScopeDispose(stop)

  return {
    isSupported,
    stop,
  }
}

• JSDoc:

  /**
   * Reports changes to the dimensions of an Element's content or the border-box
   *
   * @see https://vueuse.org/useResizeObserver
   * @param target
   * @param callback
   * @param options
   */
  

• Parameters:

• target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>
• callback: ResizeObserverCallback
• options: UseResizeObserverOptions
• Return Type: { isSupported: any; stop: () => void; }
• Calls:
• useSupported (from ../useSupported)
• observer.disconnect
• computed (from vue)
• toValue (from vue)
• Array.isArray
• _targets.map
• unrefElement (from ../unrefElement)
• watch (from vue)
• cleanup
• observer!.observe
• stopWatch
• tryOnScopeDispose (from @vueuse/shared)

cleanup(): void

Code

() => {
    if (observer) {
      observer.disconnect()
      observer = undefined
    }
  }

• Return Type: void
• Calls:
• observer.disconnect

stop(): void

Code

() => {
    cleanup()
    stopWatch()
  }

• Return Type: void
• Calls:
• cleanup
• stopWatch

---

Classes

ResizeObserver

Class Code

declare class ResizeObserver {
  constructor(callback: ResizeObserverCallback)
  disconnect(): void
  observe(target: Element, options?: UseResizeObserverOptions): void
  unobserve(target: Element): void
}

Methods

disconnect(): void

Code

disconnect(): void

observe(target: Element, options: UseResizeObserverOptions): void

Code

observe(target: Element, options?: UseResizeObserverOptions): void

unobserve(target: Element): void

Code

unobserve(target: Element): void

---

Interfaces

ResizeObserverSize

Interface Code

export interface ResizeObserverSize {
  readonly inlineSize: number
  readonly blockSize: number
}

Properties

Name	Type	Optional	Description
inlineSize	number	✗
blockSize	number	✗

ResizeObserverEntry

Interface Code

export interface ResizeObserverEntry {
  readonly target: Element
  readonly contentRect: DOMRectReadOnly
  readonly borderBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly contentBoxSize: ReadonlyArray<ResizeObserverSize>
  readonly devicePixelContentBoxSize: ReadonlyArray<ResizeObserverSize>
}

Properties

Name	Type	Optional	Description
target	Element	✗
contentRect	DOMRectReadOnly	✗
borderBoxSize	ReadonlyArray<ResizeObserverSize>	✗
contentBoxSize	ReadonlyArray<ResizeObserverSize>	✗
devicePixelContentBoxSize	ReadonlyArray<ResizeObserverSize>	✗

UseResizeObserverOptions

Interface Code

export interface UseResizeObserverOptions extends ConfigurableWindow {
  /**
   * Sets which box model the observer will observe changes to. Possible values
   * are `content-box` (the default), `border-box` and `device-pixel-content-box`.
   *
   * @default 'content-box'
   */
  box?: ResizeObserverBoxOptions
}

Properties

Name	Type	Optional	Description
box	ResizeObserverBoxOptions	✓

---

Type Aliases

ResizeObserverCallback

type ResizeObserverCallback = (entries: ReadonlyArray<ResizeObserverEntry>, observer: ResizeObserver) => void;

UseResizeObserverReturn

type UseResizeObserverReturn = ReturnType<typeof useResizeObserver>;

---