nuxt-vercel-analytics

Nuxt Vercel Analytics

Vercel Web Analytics integration for Nuxt

Features

• Zero-config
• Auto-imported track function aliased as vercelTrack

Setup

1. Add nuxt-vercel-analytics dependency to your project

# Using pnpm
pnpm add -D nuxt-vercel-analytics

# Using yarn
yarn add --dev nuxt-vercel-analytics

# Using npm
npm install --save-dev nuxt-vercel-analytics

1. Add nuxt-vercel-analytics to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["nuxt-vercel-analytics"],
});

That's it! Vercel Analytics is now integrated in your Nuxt app ✨

Configuration

// app.config.ts
export default defineAppConfig({
  vercelAnalytics: {
    mode: "auto",
    debug: true,
    beforeSend: (event) => {
      if (event.url.includes("/private")) return null;

      return event;
    },
  },
});

Custom Events

To track an event, call vercelTrack and pass in a string representing the event name as the first argument

const onSignup = () => {
  vercelTrack("Signup");
  // ...other logic
};

Custom data

You can also pass custom data along with an event by passing an object as the second argument

const onSignup = () => {
  vercelTrack("Signup", { location: "footer" });
  // ...other logic
};

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch