web-vitals - GitLite

KO | EN

gitlite — search

#python #hacktoberfest #react #typescript #golang #machine-learning #nodejs #awesome #kubernetes #awesome-list #pytorch #mcp #openai #open-source

web-vitals

(★ 386)

Web Vitals: Essential module for a healthy project

File Explorer

Download Latest Version (.zip)

- - ci.yml
- card.sketch
- event-action.png
- - about.vue
  - index.vue
- app.vue
- nuxt.config.ts
- package.json
- - default.vue
- - about.vue
  - index.vue
- nuxt.config.ts
- package.json
- yarn.lock
- - plugin.client.ts
  - plugin.nuxt2.client.ts
  - utils.ts
  - web-vitals.ts
- module.ts
- providers.ts
.editorconfig
.gitignore
.npmrc
.nuxtrc
CHANGELOG.md
eslint.config.mjs
LICENSE
package.json
pnpm-lock.yaml
pnpm-workspace.yaml
README.md
renovate.json
tsconfig.json

# Installation Guide

1. Get the code

git clone https://github.com/nuxt-modules/web-vitals

Downloads the entire project code from GitHub to your computer.

cd web-vitals

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

npm install

Downloads and installs the libraries listed in package.json.

npm start

Starts the development/run server.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Nuxt Web Vitals

> Web Vitals: Essential module for a healthy [Nuxt](https://github.com/nuxt/nuxt)

[Web Vitals](https://web.dev/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()`](https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon) or [`fetch()`](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)

## Installation

```bash
npx nuxi@latest module add web-vitals
```

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

```javascript
export default defineNuxtConfig({
  modules: [
    '@nuxtjs/web-vitals'
  ]
})
```

: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

```js
export default defineNuxtConfig({
  webVitals: {
    // provider: '', // auto detectd
    debug: false,
    disabled: false
  }
})
```

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

```js
export default defineNuxtConfig({
  webVitals: {
    ga: { id: 'UA-XXXXXXXX-X' }
  }
})
```

Behavior > Events > Overview > Event Category > Event Action

![Events Actions](https://raw.githubusercontent.com/nuxt-modules/web-vitals/main/assets/event-action.png)

_Report WebVitals to GTM_

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

```js
export default defineNuxtConfig({
  webVitals: {
    gtm: {}
  }
})
```

### 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

```js
export default defineNuxtConfig({
  webVitals: {
    provider: 'log',
    debug: true, // debug enable metrics reporting on dev environments
    disabled: false
  }
})
```

: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_

```js
export default defineNuxtConfig({
  webVitals: {
    provider: 'api',
    api: { url: '/api/web-vitals' }
    debug: true // debug enable metrics reporting on dev environments
  })
```

Example body:

```js
export default defineNuxtConfig({
  href: 'http://localhost:3000/',
  name: 'LCP',
  value: 303.599,
  rating: 'good',
  delta: 303.599,
  entries: [
    {
      name: '',
      entryType: 'largest-contentful-paint',
      startTime: 303.599,
      duration: 0,
      size: 5698,
      renderTime: 303.599,
      loadTime: 0,
      firstAnimatedFrameTime: 0,
      id: '',
      url: ''
    }
  ],
  id: 'v3-1669725914225-9792921995831',
  navigationType: 'reload'
})
```

### License

[MIT](https://opensource.org/licenses/MIT)