Nuxt.js analytics

It's easy to get Fathom Analytics working with Nuxt.js, and we've been fortunate to have customers help us write this documentation.

Note: If you are using Nuxt 2, a member of the Fathom community built a Fathom Analytics plugin for Nuxt 2:

Step 1: Install the Vue plugin

One of our customers, UBC Launch Pad, has put together a plugin that will work with Vue. The unofficial plugin can be found here. To install, run the following command:

npm i @ubclaunchpad/vue-fathom

Step 2: 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: {
      spa: "history",
    },
  });
});

Step 3: Additional configuration

Under the hood, this plugin uses fathom-client, and you can see more configuration options here.

And now you're ready to roll!

A huge thanks to Charlie Joseph for writing this guide on his personal website.

If you still have questions or require help with anything, please reach out to us and we'll happily get things sorted out for you.