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:
- Create (or select) a project in the Reshepe dashboard.
- Go to Settings → API Keys.
- 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>