Scripts

Vercel Analytics

Copy for LLMs

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

The simplest way to load Vercel Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptVercelAnalytics composable. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      vercelAnalytics: true
    }
  }
})

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

This script supports First-Party Mode which is auto-enabled, routing all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      vercelAnalytics: true
    }
  }
})

Example

Using Vercel Analytics only in production while using 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: true,
    }
  }
})

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' })
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.