docs

Appearance

@reshepe-web-vitals/vue ​

vue 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/vue

usage ​

import component in your App.vue file

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

<template>
    <WebVitals api-key="your-reshepe-public-api-key" />
</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>
    <WebVitals api-key="your-reshepe-public-api-key"
               development />
</template>

soft navigations ​

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

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

toolbar ​

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

toolbar

we keep it as a separate export to not bloat your bundle size

to enable it you need to add import in your App.vue file

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>