Skip to content

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 SettingsAPI 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>