use-object-url

Create a reactive object URL for a Blob, File, or MediaSource.

Minimal setup

Use a Vue 3.5+ project with Vue SFC compilation configured (see Vite+ integration).

vp install @vizejs/composable

Import the entry directly. Call lifecycle-bound utilities inside <script setup> so cleanup follows the component scope; consult the runtime contract for this entry's SSR and hydration behavior.

import { useObjectUrl } from "@vizejs/composable/use-object-url";

Try it

Download typed text as a file

Turn a Blob or File into a temporary URL for links, images or media, and revoke it when it changes.

Open the interactive example

What to observe: Edit the notes and Download notes.txt always links to a file with the current text.

Each new Blob gets a new URL and the previous one is revoked. Unmounting the component revokes the last URL.

Compare the initial and interacted states

Copy the example

Save this complete SFC in your Vue project. Its public imports and source are the same ones executed in the preview.

<script setup lang="ts">
import { computed, ref } from "vue";
import { useMounted } from "@vizejs/composable/use-mounted";
import { useObjectUrl } from "@vizejs/composable/use-object-url";

const notes = ref("Talk notes for Vue Fes Japan");
const file = computed(() => new Blob([notes.value], { type: "text/plain" }));
const url = useObjectUrl(file);
// Object URLs exist only in the browser; render the link after hydration.
const mounted = useMounted();
// Only object URLs are expected here; anything else falls back to a blank page.
const safeUrl = (value: string) => (value.startsWith("blob:") ? value : "about:blank");
</script>

<template>
  <div class="composable-example">
    <p>Offer text the reader typed as a downloadable file.</p>
    <label>
      Notes
      <textarea v-model="notes" rows="2"></textarea>
    </label>
    <a v-if="mounted && url" :href="safeUrl(url)" download="notes.txt">Download notes.txt</a>
    <output aria-live="polite">{{ file.size }} bytes ready to download</output>
  </div>
</template>

Runtime contract

API

useObjectUrl

Create a reactive object URL for a Blob, File, or MediaSource. A new URL is created whenever the reactive object changes and the previous one is revoked immediately, so memory held by the old object is released. The last URL is revoked when the owning reactive scope stops. Outside a scope, the caller owns the last URL (it lives until unload). Server rendering: no URL is created and the ref stays undefined.

function useObjectUrl( object: MaybeRefOrGetter<ObjectUrlSource | null | undefined>, options: UseObjectUrlOptions = {}, ): Readonly<Ref<string | undefined>>

const file = shallowRef<File>();
const preview = useObjectUrl(file);
// <img :src="preview">

Types

ObjectUrlHost

Minimal object-URL capability (the URL constructor's static methods).

UseObjectUrlOptions

Options for useObjectUrl.