How to integrate Fathom Analytics with Nuxt 3

For background, Fathom Analytics is a privacy-focused platform for providing analytics for how your website is performing. For example, where did people come from, what pages do they visit etc etc.

For the past few weeks, I have been stuck integrating it for a Nuxt v3 application - formally, my own personal portfolio site. For Nuxt 2 this was easy enough, but version 3 has been a rewrite and so its structured differently. I've managed to get it set-up after struggling to find guides online, and wanted to share in case anyone else experiences this.

Install the Vue plugin

I want to prefice that this is not an official library, but rather a community made one, however it works perfectly for my use case. To install, run the following command in your terminal:

npm i @ubclaunchpad/vue-fathom

Creating your Nuxt plugin

You should have a plugins folder, if not, create one in your projects root directory. Once done create a fathom.client.js file, this tells Nuxt to not execute this server side, and paste the following code inside it:

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",
    },
  });
});

And that's it! You're done 🎉

If you wish, you may also configure other settings within the settings configuration - check out the Fathom documentation for this.

Subscribe to Charlie's Blog

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
[email protected]
Subscribe