docs

Appearance

@reshepe-web-vitals/nuxt ​

nuxt reshepe web vitals package

monitor real user experience (RUM) and web vitals data

installation ​

simply install @reshepe-web-vitals using your package manager

bash
npm i @reshepe-web-vitals/nuxt

usage ​

add @reshepe-web-vitals/nuxt to modules in your nuxt.config.ts file

ts
export default defineNuxtConfig({
    modules: [
        ['@reshepe-web-vitals/nuxt', { apiKey: 'your-reshepe-public-api-key' }], 
    ],
});

then use component in your app.vue file

vue
<template>
    <NuxtLayout>
        <NuxtPage />
    </NuxtLayout>
    <ReshepeWebVitals />
</template>

api key ​

to get your reshepe public api key create project and go to settings

reshepe-settings

where you can find reshepe api keys

reshepe-api-keys

development mode ​

if you don't want to send data to reshepe while you are developing your application you can use development mode by adding development prop to component

it will prevent data from being sent to reshepe server

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

soft navigations ​

if you want to monitor web vitals data for soft navigations you can use report-soft-navigation prop

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

toolbar ​

toolbar is a handy helper for developers to monitor web vitals data

toolbar

to enable it you need to add toolbar prop to component

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