Fathom Analytics

Fathom Analytics is a great privacy analytics solution for your Nuxt app. It doesn't gather personal data from your visitors, yet provides detailed insights into how visitors use your site.

export default defineNuxtConfig({
  scripts: {
    registry: {
      fathomAnalytics: {
        site: 'ABCDE',
        trigger: 'onNuxtReady',
      }
    }
  }
})

const { proxy } = useScriptFathomAnalytics()

proxy.trackGoal('GOAL_ID', 100)

export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled
    registry: {
      fathomAnalytics: {
        site: 'ABCDE',
        trigger: 'onNuxtReady',
      },
    },
  },
})

<script setup lang="ts">
const { proxy } = useScriptFathomAnalytics()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.trackGoal('GOAL_ID', 100)
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Proxying is not supported

Unlike most analytics integrations in Nuxt Scripts, Fathom cannot be proxied (proxy: true).

Fathom's bot detection uses the connecting source IP address. When beacons are proxied, they reach Fathom from your server's IP (typically a datacenter), and Fathom's bot detection ignores X-Forwarded-For from arbitrary servers, so every visitor gets flagged as a bot.

Fathom previously offered an official Custom Domain feature (CNAME to their infrastructure) for first-party hosting, but they deprecated it in May 2023 and there is no replacement.

Bundling (bundle: true) is supported: the script is served from your origin, but beacons still go directly to cdn.usefathom.com from the browser so real client IPs reach Fathom's bot detection correctly.

Defaults

• Trigger: Script will load when Nuxt is hydrated.

You can access the fathom object as a proxy directly or await the $script promise to access the object. It's recommended to use the proxy for any void functions.

const { proxy } = useScriptFathomAnalytics()
function trackMyGoal() {
  proxy.trackGoal('MY_GOAL_ID', 100)
}

const { onLoaded } = useScriptFathomAnalytics()
onLoaded(({ trackGoal }) => {
  trackGoal('MY_GOAL_ID', 100)
})

Example

Loading Fathom Analytics through the app.vue when Nuxt is ready.

<script setup lang="ts">
useScriptFathomAnalytics({
  site: 'YOUR_SITE_ID',
  scriptOptions: {
    trigger: 'onNuxtReady'
  }
})
</script>