Written on December 20, 2021

How to integrate Fathom Analytics with Nuxt 3

A guide on integrating Fathom Analytics into a Nuxt 3 app.

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.

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.

Install the Vue plugin

I want to preface 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 install @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",
        },
    });
});

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