Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time

Nuxt Web Vitals

Web Vitals: Essential module for a healthy Nuxt.js

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()


# yarn
yarn add --dev @nuxtjs/web-vitals

# npm
npm install --save-dev @nuxtjs/web-vitals

Add @nuxtjs/web-vitals to the buildModules section of your nuxt.config.js

export default {
  buildModules: [

⚠️ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --save-dev or --dev flags) and use modules section in nuxt.config.js instead of buildModules.


  webVitals: {
    // provider: '', // auto detectd
    debug: false,
    disabled: false


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:

export default {
  googleAnalytics: {
    id: 'UA-XXXXXXXX-X'

Behavior > Events > Overview > Event Category > Event Action

Events Actions

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

  webVitals: {
    provider: 'log',
    debug: true, // debug enable metrics reporting on dev environments
    disabled: false

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