Nuxt

Install Clamp in a Nuxt app. Auto-pageviews via client plugin, server-side events from the Nuxt server API, queryable by your AI agent via MCP.

Install

npm install @clamp-sh/analytics

Setup

Create a plugin with a .client suffix so Nuxt only loads it in the browser:

import { init } from "@clamp-sh/analytics"

export default defineNuxtPlugin(() => {
  init("proj_xxx")
})

Pageviews — including client-side navigations — are tracked automatically.

Track custom events

Import track from the main SDK entry and call it from any component:

<script setup>
import { track } from "@clamp-sh/analytics"
</script>

<template>
  <button @click="track('signup_started', { plan: 'pro' })">
    Sign up
  </button>
</template>

Properties must be flat string key-value pairs. See Events for limits and schema.

Server-side events

From a Nuxt server API route, use the /server entry with an API key:

import { init, track } from "@clamp-sh/analytics/server"

init({ projectId: "proj_xxx", apiKey: process.env.CLAMP_API_KEY! })

export default defineEventHandler(async (event) => {
  const { anonymousId } = await readBody(event)

  await track("signup_completed", {
    anonymousId,
    properties: { plan: "pro" },
  })

  return { ok: true }
})

Pass anonymousId from the browser (via getAnonymousId()) to link server events to the visitor session.

Verify

1. Deploy or open your app at a non-localhost URL (localhost is skipped by design).
2. Navigate between a few pages.
3. In your Clamp dashboard, pageviews should appear within ~5 seconds.
4. DevTools → Network → filter for e/batch to confirm requests are sending.

Gotcha

Next step