How to integrate Fathom Analytics with Nuxt 3

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:

Loading...

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:

Loading...

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