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:
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:
If you wish, you may also configure other settings within the settings configuration - check out the Fathom documentation for this.