Nuxt Web Vitals

Web Vitals: Essential module for a healthy Nuxt

Web Vitals is an initiative by Google to provide unified guidance for quality signals that are essential to delivering a great user experience on the web.

This module will gather those metrics on each page view, and send them to a provider using either Navigator.sendBeacon() or fetch()

Installation

1# yarn
2yarn add --dev nuxtjs-web-vitals-inp
3
4# npm
5npm install --save-dev nuxtjs-web-vitals-inp

Add nuxtjs-web-vitals-inp to the modules section of your nuxt.config.js

1export default defineNuxtConfig({
2  modules: ["nuxtjs-web-vitals-inp"],
3});

:warning: If you are using Nuxt < v2.9 you have to install the module as a dependency (no --save-dev or --dev flags). If you are Nuxt 2.9+ (but not Nuxt 3) you should add the module to buildModules instead of modules.

Options

1export default defineNuxtConfig({
2  webVitals: {
3    // provider: '', // auto detectd
4    debug: false,
5    disabled: false,
6  },
7});

Providers

Google Analytics

Report WebVitals to GA

Create a GA property and get trackingID

Either provide GOOGLE_ANALYTICS_ID environement variable or set inside nuxt.config:

(Top level googleAnalytics.id is supported for backward compatibility as fallback)

1export default defineNuxtConfig({
2  webVitals: {
3    ga: { id: "UA-XXXXXXXX-X" },
4  },
5});

Behavior > Events > Overview > Event Category > Event Action

Report WebVitals to GTM

Create a GTM property and add the tag manager to your site.

1export default defineNuxtConfig({
2  webVitals: {
3    gtm: {},
4  },
5});

Vercel Analytics

Report WebVitals to Vercel

Works without configuration

Basic logger

Report WebVitals to Console

Output metrics to the console insead of sending them to a remote provider

1export default defineNuxtConfig({
2  webVitals: {
3    provider: "log",
4    debug: true, // debug enable metrics reporting on dev environments
5    disabled: false,
6  },
7});

:warning: this provider does not send WebVitals trough network, issues with navigator extensions can not be deteced with this method.

Logging to custom api

Report WebVitals to a custom api endpoint

1export default defineNuxtConfig({
2  webVitals: {
3    provider: 'api',
4    api: { url: '/api/web-vitals' }
5    debug: true // debug enable metrics reporting on dev environments
6  })

Example body:

1export default defineNuxtConfig({
2  href: "http://localhost:3000/",
3  name: "LCP",
4  value: 303.599,
5  rating: "good",
6  delta: 303.599,
7  entries: [
8    {
9      name: "",
10      entryType: "largest-contentful-paint",
11      startTime: 303.599,
12      duration: 0,
13      size: 5698,
14      renderTime: 303.599,
15      loadTime: 0,
16      firstAnimatedFrameTime: 0,
17      id: "",
18      url: "",
19    },
20  ],
21  id: "v3-1669725914225-9792921995831",
22  navigationType: "reload",
23});

License

MIT