feat: add Vercel Analytics support

docs/content/docs/1.guides/2.first-party.md

@@ -153,17 +153,26 @@ First-party mode supports the following scripts:
 
 | Script | Endpoints Proxied |
 |--------|-------------------|
-| [Google Analytics](/scripts/google-analytics) | `google-analytics.com`, `analytics.google.com`, `stats.g.doubleclick.net`, `pagead2.googlesyndication.com` |
-| [Google Tag Manager](/scripts/google-tag-manager) | `www.googletagmanager.com` |
-| [Meta Pixel](/scripts/meta-pixel) | `connect.facebook.net`, `www.facebook.com/tr`, `pixel.facebook.com` |
-| [TikTok Pixel](/scripts/tiktok-pixel) | `analytics.tiktok.com` |
-| [Segment](/scripts/segment) | `api.segment.io`, `cdn.segment.com` |
-| [PostHog](/scripts/posthog) | `us.i.posthog.com`, `eu.i.posthog.com`, `us-assets.i.posthog.com`, `eu-assets.i.posthog.com` |
-| [Microsoft Clarity](/scripts/clarity) | `www.clarity.ms`, `scripts.clarity.ms`, `d.clarity.ms`, `e.clarity.ms` |
-| [Hotjar](/scripts/hotjar) | `static.hotjar.com`, `script.hotjar.com`, `vars.hotjar.com`, `in.hotjar.com` |
-| [X/Twitter Pixel](/scripts/x-pixel) | `analytics.twitter.com`, `t.co` |
-| [Snapchat Pixel](/scripts/snapchat-pixel) | `tr.snapchat.com` |
-| [Reddit Pixel](/scripts/reddit-pixel) | `alb.reddit.com` |
+| [Google Analytics](/scripts/analytics/google-analytics) | `google-analytics.com`, `analytics.google.com`, `stats.g.doubleclick.net`, `pagead2.googlesyndication.com` |
+| [Google Tag Manager](/scripts/tracking/google-tag-manager) | `www.googletagmanager.com` |
+| [Meta Pixel](/scripts/tracking/meta-pixel) | `connect.facebook.net`, `www.facebook.com/tr`, `pixel.facebook.com` |
+| [TikTok Pixel](/scripts/tracking/tiktok-pixel) | `analytics.tiktok.com` |
+| [Segment](/scripts/tracking/segment) | `api.segment.io`, `cdn.segment.com` |
+| [PostHog](/scripts/analytics/posthog) | `us.i.posthog.com`, `eu.i.posthog.com`, `us-assets.i.posthog.com`, `eu-assets.i.posthog.com` |
+| [Microsoft Clarity](/scripts/marketing/clarity) | `www.clarity.ms`, `scripts.clarity.ms`, `d.clarity.ms`, `e.clarity.ms` |
+| [Hotjar](/scripts/marketing/hotjar) | `static.hotjar.com`, `script.hotjar.com`, `vars.hotjar.com`, `in.hotjar.com` |
+| [X/Twitter Pixel](/scripts/tracking/x-pixel) | `analytics.twitter.com`, `t.co` |
+| [Snapchat Pixel](/scripts/tracking/snapchat-pixel) | `tr.snapchat.com` |
+| [Reddit Pixel](/scripts/tracking/reddit-pixel) | `alb.reddit.com`, `pixel-config.reddit.com` |
+| [Plausible Analytics](/scripts/analytics/plausible-analytics) | `plausible.io` |
+| [Cloudflare Web Analytics](/scripts/analytics/cloudflare-web-analytics) | `static.cloudflareinsights.com`, `cloudflareinsights.com` |
+| [Rybbit Analytics](/scripts/analytics/rybbit-analytics) | `app.rybbit.io` |
+| [Umami Analytics](/scripts/analytics/umami-analytics) | `cloud.umami.is` |
+| [Databuddy Analytics](/scripts/analytics/databuddy-analytics) | `cdn.databuddy.cc`, `basket.databuddy.cc` |
+| [Fathom Analytics](/scripts/analytics/fathom-analytics) | `cdn.usefathom.com` |
+| [Vercel Analytics](/scripts/analytics/vercel-analytics) | `va.vercel-scripts.com` |
+| [Intercom](/scripts/support/intercom) | `widget.intercom.io`, `api-iam.intercom.io` |
+| [Crisp](/scripts/support/crisp) | `client.crisp.chat` |
 
 ## Requirements
 
@@ -508,7 +517,7 @@ First-party mode is for client-side scripts. For server-side tracking (Measureme
 
 ### Which scripts can I add first-party support to?
 
-Currently, first-party mode supports the 11 scripts listed in the Supported Scripts section. For other scripts, you can:
+Currently, first-party mode supports all scripts listed in the Supported Scripts section. For other scripts, you can:
 
 1. Request support by opening an issue
 2. Use the `bundle` option for self-hosting without proxy (deprecated)

docs/content/scripts/vercel-analytics.md

@@ -0,0 +1,120 @@
+---
+
+title: Vercel Analytics
+description: Use Vercel Analytics in your Nuxt app.
+links:
+  - label: Source
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/scripts/blob/main/src/runtime/registry/vercel-analytics.ts
+    size: xs
+
+---
+
+[Vercel Analytics](https://vercel.com/docs/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.
+
+::script-stats
+::
+
+::script-docs
+::
+
+### Non-Vercel Deployment
+
+When deploying outside of Vercel, provide your DSN explicitly:
+
+```ts
+useScriptVercelAnalytics({
+  dsn: 'YOUR_DSN',
+})
+```
+
+### First-Party Mode
+
+When `scripts.firstParty` is enabled, the analytics script is bundled locally and data collection requests are proxied through your server. This prevents ad blockers from blocking analytics and removes sensitive data from third-party requests.
+
+```ts
+export default defineNuxtConfig({
+  scripts: {
+    firstParty: true,
+    registry: {
+      vercelAnalytics: true,
+    }
+  }
+})
+```
+
+## Defaults
+
+- **Trigger: Client** Script will load when Nuxt is hydrating to keep web vital metrics accurate.
+
+::script-types
+::
+
+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.
+
+::code-group
+
+```ts [Proxy]
+const { proxy } = useScriptVercelAnalytics()
+proxy.track('signup', { plan: 'pro' })
+```
+
+```ts [onLoaded]
+const { onLoaded } = useScriptVercelAnalytics()
+onLoaded(({ track }) => {
+  track('signup', { plan: 'pro' })
+})
+```
+
+::
+
+## Example
+
+Loading Vercel Analytics through `app.vue` when Nuxt is ready.
+
+```vue [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.
+
+```vue [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.
+
+```vue [app.vue]
+<script setup lang="ts">
+const { proxy } = useScriptVercelAnalytics({
+  beforeSend(event) {
+    // Ignore admin pages
+    if (event.url.includes('/admin')) return null
+    return event
+  },
+})
+</script>
+```

playground/pages/third-parties/vercel-analytics/nuxt-scripts.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { ref, useHead } from '#imports'
+
+useHead({
+  title: 'Vercel Analytics',
+})
+
+const beforeSendLog = ref<string[]>([])
+
+const { proxy, status } = useScriptVercelAnalytics({
+  endpoint: '/custom/collect',
+  beforeSend(event) {
+    beforeSendLog.value.push(`${event.type}: ${event.url}`)
+    return event
+  },
+  scriptOptions: {
+    trigger: 'onNuxtReady',
+  },
+})
+
+const eventTracked = ref(false)
+const pageviewSent = ref(false)
+
+function trackEvent() {
+  proxy.track('button_click', {
+    button: 'demo',
+    page: '/third-parties/vercel-analytics',
+  })
+  eventTracked.value = true
+}
+
+function trackNested() {
+  proxy.track('nested_test', {
+    valid: 'yes',
+    nested: { should: 'be stripped' } as any,
+  })
+}
+
+function sendPageview() {
+  proxy.pageview({ path: '/test-page', route: '/[slug]' })
+  pageviewSent.value = true
+}
+
+function dumpQueue() {
+  // eslint-disable-next-line no-console
+  console.log('window.vaq:', JSON.stringify(window.vaq, null, 2))
+  // eslint-disable-next-line no-console
+  console.log('window.vam:', window.vam)
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4 p-4">
+    <ClientOnly>
+      <div>status: {{ status }}</div>
+      <div>mode (window.vam): {{ $window?.vam ?? 'n/a' }}</div>
+      <div v-if="eventTracked">
+        Event tracked!
+      </div>
+      <div v-if="pageviewSent">
+        Pageview sent!
+      </div>
+      <div v-if="beforeSendLog.length">
+        beforeSend calls: {{ beforeSendLog }}
+      </div>
+    </ClientOnly>
+
+    <div class="flex gap-2">
+      <button @click="trackEvent">
+        Track Event
+      </button>
+      <button @click="trackNested">
+        Track Nested (stripped in prod)
+      </button>
+      <button @click="sendPageview">
+        Send Pageview
+      </button>
+      <button @click="dumpQueue">
+        Dump Queue (console)
+      </button>
+    </div>
+  </div>
+</template>

src/proxy-configs.ts

@@ -307,6 +307,17 @@ function buildProxyConfig(collectPrefix: string) {
         [`${collectPrefix}/crisp/**`]: { proxy: 'https://client.crisp.chat/**' },
       },
     },
+
+    vercelAnalytics: {
+      // Vercel Analytics: trusted first-party analytics — minimal privacy needed
+      privacy: { ip: false, userAgent: false, language: false, screen: false, timezone: false, hardware: false },
+      rewrite: [
+        { from: 'va.vercel-scripts.com', to: `${collectPrefix}/vercel` },
+      ],
+      routes: {
+        [`${collectPrefix}/vercel/**`]: { proxy: 'https://va.vercel-scripts.com/**' },
+      },
+    },
   } satisfies Record<string, ProxyConfig>
 }
 

src/registry-types.json

@@ -778,6 +778,18 @@
       "code": "const ScriptYouTubePlayerDefaults = {\n  \"cookies\": \"false\",\n  \"trigger\": \"'mousedown'\",\n  \"thumbnailSize\": \"'hq720'\",\n  \"webp\": \"true\",\n  \"playerVars\": \"{ autoplay: 0, playsinline: 1 }\",\n  \"width\": \"640\",\n  \"height\": \"360\",\n  \"ratio\": \"'16/9'\",\n  \"placeholderObjectFit\": \"'cover'\"\n}"
     }
   ],
+  "vercel-analytics": [
+    {
+      "name": "VercelAnalyticsOptions",
+      "kind": "const",
+      "code": "export const VercelAnalyticsOptions = object({\n  /**\n   * The DSN of the project to send events to.\n   * Only required when self-hosting or deploying outside of Vercel.\n   */\n  dsn: optional(string()),\n  /**\n   * Whether to disable automatic page view tracking on route changes.\n   * Set to true if you want to manually call pageview().\n   */\n  disableAutoTrack: optional(boolean()),\n  /**\n   * The mode to use for the analytics script.\n   * - `auto` - Automatically detect the environment (default)\n   * - `production` - Always use production script\n   * - `development` - Always use development script (logs to console)\n   */\n  mode: optional(union([literal('auto'), literal('development'), literal('production')])),\n  /**\n   * Whether to enable debug logging.\n   * Automatically enabled in development/test environments.\n   */\n  debug: optional(boolean()),\n  /**\n   * Custom endpoint for data collection.\n   * Useful for self-hosted or proxied setups.\n   */\n  endpoint: optional(string()),\n})"
+    },
+    {
+      "name": "VercelAnalyticsApi",
+      "kind": "interface",
+      "code": "export interface VercelAnalyticsApi {\n  va: (event: string, properties?: unknown) => void\n  track: (name: string, properties?: Record<string, AllowedPropertyValues>) => void\n  pageview: (options?: { route?: string | null, path?: string }) => void\n}"
+    }
+  ],
   "carbon-ads": [
     {
       "name": "ScriptCarbonAdsProps",

src/registry.ts

@@ -42,6 +42,17 @@ export async function registry(resolve?: (path: string, opts?: ResolvePathOption
         from: await resolve('./runtime/registry/cloudflare-web-analytics'),
       },
     },
+    {
+      label: 'Vercel Analytics',
+      src: 'https://va.vercel-scripts.com/v1/script.js',
+      proxy: 'vercelAnalytics',
+      category: 'analytics',
+      logo: `<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 512 512"><path d="M256 48L496 464H16z" fill="currentColor"/></svg>`,
+      import: {
+        name: 'useScriptVercelAnalytics',
+        from: await resolve('./runtime/registry/vercel-analytics'),
+      },
+    },
     {
       label: 'PostHog',
       src: false,

src/runtime/registry/schemas.ts

@@ -879,6 +879,36 @@ export const XEmbedOptions = object({
   imageProxyEndpoint: optional(string()),
 })
 
+export const VercelAnalyticsOptions = object({
+  /**
+   * The DSN of the project to send events to.
+   * Only required when self-hosting or deploying outside of Vercel.
+   */
+  dsn: optional(string()),
+  /**
+   * Whether to disable automatic page view tracking on route changes.
+   * Set to true if you want to manually call pageview().
+   */
+  disableAutoTrack: optional(boolean()),
+  /**
+   * 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)
+   */
+  mode: optional(union([literal('auto'), literal('development'), literal('production')])),
+  /**
+   * Whether to enable debug logging.
+   * Automatically enabled in development/test environments.
+   */
+  debug: optional(boolean()),
+  /**
+   * Custom endpoint for data collection.
+   * Useful for self-hosted or proxied setups.
+   */
+  endpoint: optional(string()),
+})
+
 export const XPixelOptions = object({
   /**
    * Your X (Twitter) Pixel ID.