Scripts

Fathom Analytics

Copy for LLMs

Get started with Fathom Analytics

$10 credit

Sign Up

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.

Fathom Analytics

View source

Nuxt Config Setup

Add this to your nuxt.config.ts to load Fathom Analytics globally. Alternatively you can use the useScriptFathomAnalytics composable for more control. 

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

This config automatically enables first-party mode (bundle + proxy). See below to customise.

useScriptFathomAnalytics()

The useScriptFathomAnalytics composable lets you have fine-grain control over when and how Fathom Analytics is loaded on your site. 

const { proxy } = useScriptFathomAnalytics()

proxy.trackGoal('GOAL_ID', 100)

Please follow the Registry Scripts guide to learn more about advanced usage.

First-Party Mode: Privacy Focused Proxy

No extra config needed. The script is bundled from your domain (faster loads, no extra DNS lookup) and runtime requests are reverse-proxied through your server with automatic anonymisation (user IPs stay hidden from Fathom Analytics, works with ad blockers). Learn more.

Mode
Bundle Proxy Partytown
Privacy
User IP addresses are anonymised. Other request data passes through.
export default defineNuxtConfig({
  scripts: {
    // ✅ First-party mode: bundled + proxied
    registry: {
      fathomAnalytics: {
        site: 'ABCDE',
        trigger: 'onNuxtReady',
      },
    },
  },
})

Example

Using Fathom Analytics in a component with the proxy to send events . 

<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>

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)
}
sitestring required

The Fathom Analytics site ID.

spa'auto' | 'history' | 'hash' = 'auto'

The Fathom Analytics tracking mode.

autoboolean = true

Automatically track page views.

canonicalboolean = true

Enable canonical URL tracking.

honorDntboolean = false

Honor Do Not Track requests.

Example

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

app.vue
<script setup lang="ts">
useScriptFathomAnalytics({
  site: 'YOUR_SITE_ID',
  scriptOptions: {
    trigger: 'onNuxtReady'
  }
})
</script>
Edit this page
Markdown For LLMs

Databuddy Analytics

Use Databuddy Analytics in your Nuxt app.

Google Adsense

Show Google Adsense ads in your Nuxt app.