Skip to main content
Scripts

Vercel Analytics

Copy for LLMs

Vercel Web Analytics records page views and custom events. Its Privacy and Compliance guide documents the collection and visitor identification model.

Vercel Analytics

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Vercel Analytics globally. Alternatively you can use the useScriptVercelAnalytics composable for more control. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      vercelAnalytics: {
        trigger: 'onNuxtReady',
      }
    }
  }
})

This config automatically enables first-party mode (bundle + proxy). See below to customise.

useScriptVercelAnalytics()

The useScriptVercelAnalytics composable lets you have fine-grain control over when and how Vercel Analytics is loaded on your site. 

const { proxy } = useScriptVercelAnalytics()

// automatic page view tracking

Please follow the Registry Scripts guide to learn more about advanced usage.

First-Party Mode: Privacy Focused Proxy

No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Vercel Analytics, works with ad blockers). Learn more.

Mode
Bundle Proxy
Privacy
User IP addresses are anonymised. Other request data passes through.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      vercelAnalytics: {
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Vercel Analytics in a component with the proxy to send events . 

<script setup lang="ts">
const { proxy } = useScriptVercelAnalytics()

// noop in development, ssr
// just works in production, client
function handleAction() {
  // automatic page view tracking
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Non-Vercel Deployment

When deploying outside Vercel, provide your DSN explicitly. Its analytics package reference documents the dsn option for this case:

useScriptVercelAnalytics({
  dsn: 'YOUR_DSN',
})

First-Party Mode

This registry entry enables first-party mode. Nuxt bundles the script locally and proxies intake requests through your server. The proxy anonymizes the client IP to a subnet, but it does not redact event bodies or URLs.

export default defineNuxtConfig({
  scripts: {
    registry: {
      vercelAnalytics: { trigger: 'client' },
    }
  }
})

Defaults

  • Trigger: Client The script loads during Nuxt hydration to keep Web Vitals metrics accurate.

The registry fixes this trigger to client. A scriptOptions.trigger value passed by the caller is overwritten.

The build environment selects the file: development builds use script.debug.js, while production builds use script.js. The mode option sets Vercel's window.vam runtime value; it does not change that file selection. The current debug mapping only forwards debug: false in development, so debug: true does not enable the debug script in a production build.

Call the void-returning track and pageview methods through the proxy. You can also await $script to access the loaded object.

const { proxy } = useScriptVercelAnalytics()
proxy.track('signup', { plan: 'pro' })
dsnstring

The DSN of the project to send events to. Only required when self-hosting or deploying outside of Vercel.

disableAutoTrackboolean

Whether to disable automatic page view tracking on route changes. Set to true if you want to manually call pageview().

mode'auto' | 'development' | 'production'

The mode to use for the analytics script. - `auto` - Automatically detect the environment (default) - `production` - Always use production script - `development` - Always use development script (logs to console)

debugboolean

Whether to enable debug logging. Automatically enabled in development/test environments.

endpointstring

Custom endpoint for data collection. Useful for self-hosted or proxied setups.

Example

Load Vercel Analytics through app.vue:

app.vue
<script setup lang="ts">
const { proxy } = useScriptVercelAnalytics()

// Track a custom event
proxy.track('signup', { plan: 'pro' })
</script>

Manual Tracking

Disable automatic tracking and call track or pageview yourself:

app.vue
<script setup lang="ts">
const { proxy } = useScriptVercelAnalytics({
  disableAutoTrack: true,
})

// Track custom event
proxy.track('purchase', { product: 'widget', price: 9.99 })

// Manual pageview
proxy.pageview({ path: '/custom-page' })
</script>

beforeSend

Use beforeSend to filter or modify events before they reach Vercel. Return null to cancel an event. This is also where Vercel recommends redacting sensitive URL data.

app.vue
<script setup lang="ts">
const { proxy } = useScriptVercelAnalytics({
  beforeSend(event) {
    // Ignore admin pages
    if (event.url.includes('/admin'))
      return null
    return event
  },
})
</script>
Edit this page
Markdown For LLMs

Usercentrics

Load the Usercentrics CMP v3 and drive useScript consent triggers from UC_UI_CMP_EVENT events.

Vimeo Player

Show performance-optimized Vimeo videos in your Nuxt app.