docs

Appearance

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

Installation ​

Install the Nuxt module using your preferred package manager:

bash
npm i @reshepe-web-vitals/nuxt

Usage ​

Add the module to your nuxt.config.ts:

ts
export default defineNuxtConfig({
    modules: [
        ['@reshepe-web-vitals/nuxt', {
            apiKey: 'YOUR-RESHEPE-PUBLIC-API-KEY',
        }],
    ],
});

Then render the component in your root layout (e.g. App.vue or app.vue):

vue
<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
    <ReshepeWebVitals />
</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 your Nuxt module config

you can follow instructions to get your public API key here

Development Mode ​

Prevent data from being sent during development by enabling the development prop:

vue
<template>
    <ReshepeWebVitals development />
</template>

Soft Navigations ​

To monitor Web Vitals across client-side navigations, enable the report-soft-navigation prop:

vue
<template>
    <ReshepeWebVitals report-soft-navigation />
</template>

Toolbar ​

For an on-page overlay of live metrics (development only), enable the toolbar by adding the toolbar prop:

vue
<template>
    <ReshepeWebVitals toolbar />
</template>