Analytics

Track user behavior with Umami and Vercel Analytics

The template includes two privacy-friendly analytics integrations: Umami (self-hosted or cloud) and Vercel Analytics. Both are GDPR compliant, cookie-free, and load automatically when configured.

What's included

Two client plugins:

app/plugins/umami.client.ts - Umami integration
app/plugins/vercel-analytics.client.ts - Vercel Analytics integration

Features:

Privacy-focused (GDPR compliant, no cookies)
Conditional loading (only loads when env vars are set)
Automatic page view tracking
Can use one or both simultaneously

Umami Analytics

Quick setup

Create an Umami account:
- Umami Cloud (recommended) or self-host
- Create a new website in your dashboard
- Copy your website ID
Configure environment variables:

.env

NUXT_PUBLIC_UMAMI_ID="your-website-id"
NUXT_PUBLIC_UMAMI_HOST="https://cloud.umami.is"

For self-hosted: use your own domain (e.g., https://analytics.yourdomain.com)

Both variables are required. If either is missing, Umami won't load.

That's it! The plugin automatically injects the tracking script and tracks page views.

Vercel Analytics

Quick setup

Enable in Vercel dashboard:
- Go to your project at vercel.com
- Settings → Analytics → Enable Web Analytics
Configure environment variable:

.env

NUXT_PUBLIC_VERCEL_ANALYTICS="true"

Works on any hosting platform, not just Vercel. Data is sent to Vercel's analytics service.

Using both providers

Enable both for comprehensive tracking:

.env

NUXT_PUBLIC_UMAMI_ID="your-website-id"
NUXT_PUBLIC_UMAMI_HOST="https://cloud.umami.is"
NUXT_PUBLIC_VERCEL_ANALYTICS="true"

Why use both?

Umami: Full control, self-hosting option, privacy compliance
Vercel Analytics: Web Vitals, performance metrics, built-in with Vercel deployments

Environment-specific setup

Development: Omit variables to disable tracking during local development

Production: Set all desired analytics variables in your hosting platform's environment settings

Custom event tracking

Track custom events beyond page views:

Umami:

<script setup>
const handlePurchase = () => {
  // Check if Umami is loaded
  if (window.umami) {
    window.umami.track('purchase', { plan: 'pro', amount: 29 })
  }
}
</script>

<template>
  <Button @click="handlePurchase">Buy Now</Button>
</template>

Vercel Analytics:

<script setup>
import { track } from '@vercel/analytics'

const handlePurchase = () => {
  track('purchase', { plan: 'pro', amount: 29 })
}
</script>

<template>
  <Button @click="handlePurchase">Buy Now</Button>
</template>

For Umami, always check if window.umami exists before calling track() to avoid errors if the script hasn't loaded yet.

Privacy & compliance

GDPR compliant:

No cookies required
No personal data collection
IP addresses anonymized
Do Not Track (DNT) respected by Umami

Since these analytics are privacy-friendly, cookie consent banners typically aren't required. Check your local regulations.

Disabling in development

Both plugins automatically skip loading when environment variables aren't set. To disable analytics during local development, simply omit the variables from your .env file.

Troubleshooting

Scripts not loading:

Verify environment variables are set correctly
Check browser console for errors
Check Network tab for script requests

Data not appearing:

Wait a few minutes for data to process
Verify website ID/configuration in dashboard
Check that the script is loading (Network tab)

Reference

Start with Umami Cloud for the easiest setup. Self-host later if you need full control over your data.

Geolocation

Detect user location with IPinfo for dynamic pricing and localized experiences

Logo

Replace the default logo with your own branding