⬅️ Back to Table of Contents

📄 index.ts

📊 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
readonly	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 | null | undefined>): any

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 readonly(url)
}

• JSDoc:

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

• Parameters:

• object: MaybeRefOrGetter<Blob | MediaSource | null | undefined>
• Return Type: any
• Calls:
• shallowRef (from vue)
• URL.revokeObjectURL
• watch (from vue)
• toValue (from vue)
• release
• URL.createObjectURL
• tryOnScopeDispose (from @vueuse/shared)
• readonly (from vue)

release(): void

Code

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

    url.value = undefined
  }

• Return Type: void
• Calls:
• URL.revokeObjectURL

---