nuxt-foresite

nuxt-foresite

Foresite for Nuxt: privacy-first website analytics with no cookies and nothing that identifies your visitors.

This module adds the Foresite Tracking Script to every page's <head>, server-rendered, static or single-page, and gives you useForesite() for custom events. Client-side page changes are counted as pageviews automatically.

Setup

npm install nuxt-foresite

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-foresite'],
  foresite: {
    siteId: 's_k3v9q2m7xw4a', // from Settings → Install in Foresite
  },
})

Don't have a Site ID yet? Start a free 7-day trial, no card required, or open the live demo.

Options

Each option can also be set when a server-rendered app starts, through NUXT_PUBLIC_FORESITE_SITE_ID, NUXT_PUBLIC_FORESITE_HOST and NUXT_PUBLIC_FORESITE_ENABLED.

Visits to localhost are never counted, so nuxt dev won't add test traffic.

Custom events

<script setup lang="ts">
const foresite = useForesite()

function onSignup() {
  foresite('signup', { props: { plan: 'pro' } })
}

function onPurchase() {
  foresite('purchase', { revenue: { amount: 49.99, currency: 'USD' } })
}
</script>

Events sent before the script has loaded are queued, and calls during server rendering do nothing. Never put personal data in properties. See custom events, goals and revenue.

License

MIT. The Tracking Script itself is open source too.