use-storage-estimate

Track the origin's storage usage and quota with navigator.storage.estimate().

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 { usePersistentStorage, useStorageEstimate } from "@vizejs/composable/use-storage-estimate";

Try it

Show how much storage is used

Read the origin's storage usage and quota to warn before offline data fills it.

Open the interactive example

What to observe: The output shows used and available megabytes. Refresh estimate reads them again.

Estimates are approximate by design. usePersistentStorage from the same entry asks the browser not to evict the data.

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 { useMounted } from "@vizejs/composable/use-mounted";
import { useStorageEstimate } from "@vizejs/composable/use-storage-estimate";

const { supported, usage, quota, percentUsed, refresh } = useStorageEstimate();
const mounted = useMounted();
const megabytes = (bytes: number | null) =>
  bytes === null ? "?" : (bytes / 1024 / 1024).toFixed(1);
</script>

<template>
  <div class="composable-example">
    <p>Warn before offline data fills the browser's storage quota.</p>
    <button type="button" @click="() => refresh()">Refresh estimate</button>
    <output aria-live="polite">{{
      !mounted
        ? "Reading the storage estimate…"
        : !supported
          ? "Storage estimates are not available."
          : `Using ${megabytes(usage)} MB of ${megabytes(quota)} MB (${percentUsed?.toFixed(2) ?? "?"}%)`
    }}</output>
  </div>
</template>

Runtime contract

API

useStorageEstimate

Track the origin's storage usage and quota with navigator.storage.estimate(). The estimate is read on creation (unless immediate is false), whenever a reactive storage host changes, on refresh(), and every interval milliseconds through the injectable scheduler. The polling timer stops with the owning reactive scope; outside a scope, polling runs until the page unloads, so leave interval at 0 there. Server rendering: nothing is read, no timer starts, supported is false and every value is null.

function useStorageEstimate( options: UseStorageEstimateOptions = {}, ): StorageEstimateControls

const { usage, quota, percentUsed } = useStorageEstimate({ interval: 60_000 });

usePersistentStorage

Read and request persistent storage with navigator.storage.persist(). Persistent storage is not evicted under storage pressure. persist() may show a prompt or be decided silently by the browser; the result is stored in persisted. Nothing needs cleanup; a pending read is ignored after the owning reactive scope stops. Server rendering: nothing is read, supported and persisted are false.

function usePersistentStorage( options: UsePersistentStorageOptions = {}, ): PersistentStorageControls

const storage = usePersistentStorage();
const keepOfflineData = () => storage.persist();

Types

StorageEstimateLike

Result of navigator.storage.estimate().

StorageManagerLike

Minimal StorageManager (navigator.storage) used by this module.

UseStorageEstimateOptions

Options for useStorageEstimate.

StorageEstimateControls

Reactive state and actions returned by useStorageEstimate.

UsePersistentStorageOptions

Options for usePersistentStorage.

PersistentStorageControls

Reactive state and actions returned by usePersistentStorage.