Vercel Analytics
Configure Vercel Analytics through the official SDK and keep a small portable runtime API.
Use Vercel Analytics when the app already deploys on Vercel and you want official pageviews, RUM, and custom events through the shared @vitehub/analytics API.
Before you start
Install the official Vercel package alongside @vitehub/analytics.
Terminal
pnpm add https://pkg.pr.new/vite-hub/vitehub/@vitehub/analytics@main @vercel/analytics
Enable Web Analytics in the Vercel dashboard for the project. Custom event availability can also depend on your Vercel plan.
Configure Vercel
Set analytics.provider to vercel, then keep Vercel-specific client settings under analytics.vercel.
nuxt.config.ts
export default defineNuxtConfig({
modules: ['@vitehub/analytics/nuxt'],
analytics: {
provider: 'vercel',
vercel: {
mode: 'auto',
debug: import.meta.dev,
},
},
})
Vercel-specific options
Keep Vercel settings in top-level analytics.vercel config.
| Option | Use it for |
|---|---|
beforeSend | Filter or rewrite outgoing client events before Vercel sends them. |
disableAutoTrack | Turn off Vercel's automatic page tracking. |
mode and debug | Control Vercel SDK mode and debug output. |
basePath, scriptSrc, endpoint, eventEndpoint, sessionEndpoint, viewEndpoint | Point the Vercel client at custom script or ingestion paths. |
dsn and framework | Forward extra Vercel client configuration when needed. |
Track events
Use the same runtime helpers on the client or the server. ViteHub forwards the calls to the official Vercel client or server module that matches the current runtime.
server/api/checkout.post.ts
import { identify, track } from '@vitehub/analytics'
export default defineEventHandler(async () => {
await identify('user_123', { plan: 'pro' })
await track('checkout-started', { plan: 'pro' })
return { ok: true }
})
What changes on Vercel
| Concern | Behavior |
|---|---|
| Browser bootstrap | ViteHub calls the official inject() client bootstrap with the values from analytics.vercel. |
| Page tracking | page() uses pageview() in the browser and server.track('page', data) on Nitro. |
| Event helpers | track(), identify(), alias(), group(), and reset() forward to the official Vercel client or server modules. |
| Native handle | getAnalytics().native exposes inject, pageview, track, serverTrack, and computeRoute. |
Choose Vercel when the app already deploys on Vercel and you want the shared ViteHub API to map as directly as possible to Vercel's own analytics surface.