use-web-vitals

Standard [good, poor] thresholds: values up to the first bound are "good", values above the second are "poor".

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 { WEB_VITALS_THRESHOLDS, rateMetric, useWebVitals } from "@vizejs/composable/use-web-vitals";

Try it

Report Core Web Vitals

Measure LCP, CLS, INP, FCP and TTFB from real visits and send them to analytics.

Open the interactive example

What to observe: Metrics appear as the page reports them; first contentful paint usually comes first.

Values arrive over time and some are only final when the page is hidden. Use onMetric to send each update.

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 } from "vue";
import { useMounted } from "@vizejs/composable/use-mounted";
import { useWebVitals } from "@vizejs/composable/use-web-vitals";

const { metrics, supported } = useWebVitals({ reportAllChanges: true });
const mounted = useMounted();
const rows = computed(() =>
  Object.values(metrics.value).map(
    (metric) => `${metric?.name} ${Math.round(metric?.value ?? 0)} (${metric?.rating})`,
  ),
);
</script>

<template>
  <div class="composable-example">
    <p>Report Core Web Vitals from real visits to your analytics.</p>
    <ul aria-label="Web vitals">
      <li v-for="row in rows" :key="row">{{ row }}</li>
    </ul>
    <output aria-live="polite">{{
      !mounted
        ? "Waiting for the first metric…"
        : !supported
          ? "This browser does not report Web Vitals."
          : rows.length === 0
            ? "Waiting for the first metric…"
            : `${rows.length} metrics reported`
    }}</output>
  </div>
</template>

Runtime contract

API

WEB_VITALS_THRESHOLDS

Standard [good, poor] thresholds: values up to the first bound are "good", values above the second are "poor". Times are milliseconds; CLS is unitless.

const WEB_VITALS_THRESHOLDS

rateMetric

Rate a metric value with WEB_VITALS_THRESHOLDS.

function rateMetric(name: WebVitalName, value: number): WebVitalRating

useWebVitals

Measure LCP, CLS, INP, FCP and TTFB locally, without dependencies. - LCP: last candidate before the first input or hidden page. - CLS: largest session window (shifts < 1 s apart, window ≤ 5 s), ignoring shifts after recent input. - INP: per-interaction maximum duration; the highest after ignoring one per 50 interactions (a p98 approximation over the 10 longest). The interaction count only includes interactions above durationThreshold. - FCP: first-contentful-paint before the page was first hidden. - TTFB: navigation responseStart - activationStart, clamped at 0. Values are not adjusted for prerender activation except TTFB. Observers and listeners are released when the owning reactive scope stops; outside a scope the caller owns stop(). Server rendering: nothing is observed, metrics is {} and supported is false.

function useWebVitals(options: UseWebVitalsOptions = {}): WebVitalsControls

const { metrics, onMetric } = useWebVitals();
onMetric((metric) => navigator.sendBeacon("/vitals", JSON.stringify(metric)));

Types

WebVitalMetric

Snapshot of one metric.

WebVitalsDocumentHost

Minimal document consumed by useWebVitals.

UseWebVitalsOptions

Options for useWebVitals.

WebVitalsControls

Reactive state and actions returned by useWebVitals.