How to integrate Fathom Analytics with Nuxt 3

Fathom Analytics is a privacy-focused platform for providing analytics. While integrating it with Nuxt 2 was straightforward, Nuxt 3's restructured architecture requires a different approach.

Installation

First, install the Vue plugin. I recommend using a community-created library:

npm install @ubclaunchpad/vue-fathom

Creating the Plugin

Create a fathom.client.js file in your project's plugins directory. The .client.js suffix ensures server-side execution is skipped.

import { defineNuxtPlugin } from "#app";
import VueFathom from "@ubclaunchpad/vue-fathom";
 
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(VueFathom, {
    siteID: "YourSiteID",
    settings: {
      url: "YourSiteURL",
      spa: "history",
    },
  });
});

Configuration

Here's what each setting does:

• siteID: Your unique Fathom identifier
• url: Your website's URL
• spa: Set to "history" for single-page applications

Additional settings are available in Fathom's official documentation.

That's it! Your Nuxt 3 app now has privacy-focused analytics without compromising your users' data.