Support home / Integrations /

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.

Step 1: Create a middleware file

Create a file in your middleware directory called fathom.js and add this code:

export default function(context) {
if (!process.client) {
return
}
 
window.fathom.trackPageview()
}

Step 2: Add the middleware to your configuration

In your nuxt.config.js file, add the new Fathom middleware. The router section should look similar to the following code:

// Router config
router: {
middleware: [
'fathom'
]
}

Step 3: Add the Fathom script to your configuration

The final step is to add the Fathom script to your nuxt.config.js file.

// Script tags
script: [
// Fathom Analytics
{
// Use your Fathom custom domain if you have one
src: 'https://cdn.usefathom.com/script.js',
'data-site': 'Your-Site-ID-Goes-Here',
'defer': true
}
]

And now you're ready to roll!

Further customization

To learn about all the options we offer, read our advanced documentation here.

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.