Scripts

Vercel Analytics

Vercel Analytics provides lightweight, privacy-friendly web analytics for your Nuxt app. It tracks page views and custom events with zero configuration when deployed on Vercel.

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 of Vercel, provide your DSN explicitly:

useScriptVercelAnalytics({
  dsn: 'YOUR_DSN',
})

First-Party Mode

First-party mode is auto-enabled for Vercel Analytics. Nuxt bundles the analytics script locally and proxies data collection requests through your server. This prevents ad blockers from blocking analytics and removes sensitive data from third-party requests.

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

Defaults

Trigger: Client Script will load when Nuxt is hydrating to keep web vital metrics accurate.

You can access the track and pageview methods as a proxy directly or await the $script promise to access the object. It's recommended to use the proxy for any void functions.

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

const { onLoaded } = useScriptVercelAnalytics()
onLoaded(({ track }) => {
  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

Loading Vercel Analytics through app.vue when Nuxt is ready.

app.vue

<script setup lang="ts">
const { proxy } = useScriptVercelAnalytics({
  scriptOptions: {
    trigger: 'onNuxtReady',
  },
})

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

Manual Tracking

If you want full control over what gets tracked, disable automatic tracking and call track / pageview manually.

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.

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

Umami Analytics

Use Umami Analytics in your Nuxt app.

Vimeo Player

Show performance-optimized Vimeo videos in your Nuxt app.

On this page