docs

Appearance

The Reshepe Web Vitals package for Vue lets you monitor Core Web Vitals metrics real-time with ease in your Vue applications.

Installation ​

Install the Vue package using your preferred package manager:

bash
npm i @reshepe-web-vitals/vue

Usage ​

Import and render the WebVitals component in your root component (e.g. App.vue):

vue

<script setup
        lang="ts">
import { WebVitals } from '@reshepe-web-vitals/vue';
</script>

<template>
    <WebVitals api-key="YOUR-RESHEPE-PUBLIC-API-KEY" />
</template>

To get your Reshepe public API key:

  1. Create (or select) a project in the Reshepe dashboard.
  2. Go to Settings → API Keys.
  3. Copy the Public API Key and use it in the api-key prop.

you can follow instructions to get your public API key here

Development Mode ​

Prevent data from being sent while you develop by adding the development prop:

vue

<template>
    <WebVitals api-key="your-reshepe-public-api-key"
               development />
</template>

Soft Navigations ​

Track single-page-app navigations by enabling the report-soft-navigation prop:

vue

<template>
    <WebVitals api-key="your-reshepe-public-api-key"
               report-soft-navigation />
</template>

Toolbar ​

For an on-page Web Vitals overlay (development only), import and render the Toolbar component alongside WebVitals:

vue

<script setup
        lang="ts">
import { WebVitals, Toolbar } from '@reshepe-web-vitals/vue';
</script>

<template>
    <WebVitals api-key="your-reshepe-public-api-key" />
    <Toolbar />
</template>