⬅️ Back to Table of Contents

📄 useObjectUrl

📊 Analysis Summary

Metric	Count
🔧 Functions	2
📦 Imports	6
🟢 Vue Composition API	1

📚 Table of Contents

• Imports
• Vue Composition API
• Functions

🛠️ File Location:

📂 packages/core/useObjectUrl/index.ts

📦 Imports

Name	Source
MaybeRefOrGetter	vue
tryOnScopeDispose	@vueuse/shared
shallowReadonly	vue
shallowRef	vue
toValue	vue
watch	vue

---

Vue Composition API

Name	Type	Reactive Variables	Composables
watch	watch	none	none

---

Functions

useObjectUrl(object: MaybeRefOrGetter<Blob | MediaSource | n…): any

Reactive URL representing an object.

Parameters:

• object any: No description

See: https://vueuse.org/useObjectUrl

Raw JSDoc

/**
 * Reactive URL representing an object.
 *
 * @see https://vueuse.org/useObjectUrl
 * @param object
 */

Calls:

• shallowRef (from vue)
• URL.revokeObjectURL
• watch (from vue)
• toValue (from vue)
• release
• URL.createObjectURL
• tryOnScopeDispose (from @vueuse/shared)
• shallowReadonly (from vue)

Code

export function useObjectUrl(object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>) {
  const url = shallowRef<string | undefined>()

  const release = () => {
    if (url.value)
      URL.revokeObjectURL(url.value)

    url.value = undefined
  }

  watch(
    () => toValue(object),
    (newObject) => {
      release()

      if (newObject)
        url.value = URL.createObjectURL(newObject)
    },
    { immediate: true },
  )

  tryOnScopeDispose(release)

  return shallowReadonly(url)
}

Internal helpers

Declared inside another function in this file.

release(): void

Returns: void

Calls:

• URL.revokeObjectURL

Code

() => {
    if (url.value)
      URL.revokeObjectURL(url.value)

    url.value = undefined
  }

---

Generated by Syntax Scribe