use-performance-observer

Observe performance entries with callbacks typed by entry type.

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 { usePerformanceObserver } from "@vizejs/composable/use-performance-observer";

Try it

Time the page's requests

Observe performance entries such as resources, marks, measures and long tasks as the browser records them.

Open the interactive example

What to observe: Each Send a request adds the request and its duration to the list.

Pass several entry types as an array. buffered: true also delivers entries recorded before the observer started.

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 { ref } from "vue";
import { usePerformanceObserver } from "@vizejs/composable/use-performance-observer";

const requests = ref<string[]>([]);
usePerformanceObserver("resource", (entries) => {
  for (const entry of entries) {
    if (entry.initiatorType !== "fetch") continue;
    const url = new URL(entry.name);
    requests.value = [...requests.value, `${url.search} in ${Math.round(entry.duration)} ms`];
  }
});
let count = 0;

async function request() {
  count += 1;
  // Stands in for an API call; any same-origin request produces a resource entry.
  await fetch(`${location.pathname}?request=${count}`);
}
</script>

<template>
  <div class="composable-example">
    <p>Watch how long the page's requests take, as the browser records them.</p>
    <button type="button" @click="request">Send a request</button>
    <ul aria-label="Recorded requests">
      <li v-for="item in requests" :key="item">{{ item }}</li>
    </ul>
    <output aria-live="polite">{{ requests.length }} requests recorded</output>
  </div>
</template>

Runtime contract

API

usePerformanceObserver

Observe performance entries with callbacks typed by entry type. Each supported type is observed with its own observe({ type }) call so buffered and durationThreshold apply. Types missing from PerformanceObserver.supportedEntryTypes are skipped; supported is false when none remain. The observer follows reactive entryTypes and is disconnected when the owning reactive scope stops; outside a scope the caller owns stop(). Server rendering: no observer is created and supported is false. Inside a component the observer connects after mounting, so hydration renders the server state first.

function usePerformanceObserver<const Type extends PerformanceEntryType>( entryTypes: MaybeRefOrGetter<Type | readonly Type[]>, callback: PerformanceObserverCallback<Type>, options: UsePerformanceObserverOptions = {}, ): PerformanceObserverControls<Type>

usePerformanceObserver("largest-contentful-paint", (entries) => {
  console.log(entries.at(-1)?.renderTime);
}, { buffered: true });

Types

PerformanceEntryLike

Fields shared by every performance entry consumed by usePerformanceObserver.

LargestContentfulPaintEntryLike

largest-contentful-paint entry.

LayoutShiftEntryLike

layout-shift entry (Layout Instability API).

EventTimingFieldsLike

Fields of Event Timing entries (event and first-input).

EventTimingEntryLike

event entry (Event Timing API).

FirstInputEntryLike

first-input entry (Event Timing API).

PaintEntryLike

paint entry (first-paint or first-contentful-paint).

ResourceTimingFieldsLike

Fields shared by resource and navigation timing entries.

ResourceTimingEntryLike

resource entry (Resource Timing API).

NavigationTimingEntryLike

navigation entry (Navigation Timing API).

LongTaskEntryLike

longtask entry (Long Tasks API).

MarkEntryLike

mark entry (User Timing API).

MeasureEntryLike

measure entry (User Timing API).

ElementTimingEntryLike

element entry (Element Timing API).

LongAnimationFrameEntryLike

long-animation-frame entry (Long Animation Frames API).

PerformanceEntryTypeMap

Entry interface delivered for each supported entry type.

PerformanceObserveInit

Options passed to PerformanceObserverLike.observe.

PerformanceObserverEntryListLike

Minimal entry list handed to observer callbacks.

PerformanceObserverLike

Minimal PerformanceObserver instance.

PerformanceObserverHost

Minimal PerformanceObserver constructor.

UsePerformanceObserverOptions

Options for usePerformanceObserver.

PerformanceObserverControls

Reactive state and actions returned by usePerformanceObserver.