A nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory

Overview

repo banner

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❤️‍🔥 .

🔧 Installation

1. Install the following packages:

npm i fathom-client
npm i @lostdesign/nuxt-fathom

2. Register the module inside nuxt.config.js

export default {
  ...
  modules: ['@lostdesign/nuxt-fathom']
  ...
}

3. Configure the module inside nuxt.config.js

export default {
  ...
  fathom: {
    namespace: 'fathom', // optional
    spa: 'history', // recommended
    siteId: 'YOUR-SITE-ID-FROM-FATHOM',
    url: 'https://custom.fathom.domain.com/script.js'
    honorDNT: false,
    includedDomains: [
      'replace-with-your-domain.com',
      'localhost:3000',
      'uselinked.com'
    ],
    excludedDomains: [
      'google.com'
    ],
    canonical: true,
  },
  ...
}
Property Type Required Description
siteId string mandatory The site id as given by fathom, find yours in your usefathom settings.
spa string mandatory Accepts one of the following values: auto, history, or hash (see advanced docs).
includedDomains array optional Only tracks when on one of these domains.
excludedDomains array optional Only tracks when NOT on one of these domains.
url string optional The URL of the tracking script (defaults to https://cdn.usefathom.com/script.js). If you're using a custom domain then you should change this parameter to use it (example https://parrot.yourwebsite.com/script.js).
honorDNT boolean optional When true, honors the DNT header in the visitor's browser
canonical boolean optional When false, ignores the canonical tag if present (defaults to true).
namespace string optional Optional value to overwrite the default namespace of fathom. Default is fathom which means you will be able to use this.$fathom.trackPageview().

4. Optional: Register global trackPageview middleware inside nuxt.config.js

Every pageview will be automatically tracked if you register this middleware. Without you are required to call this.$fathom.trackPageview() yourself, most likely inside a custom page middleware.

export default {
  ...
  router: {
    middleware: ['fathom']
  }
  ...
}

📚 Usage

this.$fathom.trackPageview(opts?: object)

Tracks a pageview.

Arguments
  • opts - An Object of options:
    • url - When set, overrides window.location.
    • referrer - When set, overrides document.referrer.

this.$fathom.trackGoal(code: string, cents: number)

Tracks a goal.

Arguments
  • code - the code provided in the Fathom UI.
  • cents - the value of the goal conversion.

this.$fathom.enableTrackingForMe()

Enables tracking for the current visitor.

See https://usefathom.com/docs/features/exclude.

this.$fathom.blockTrackingForMe()

Blocks tracking for the current visitor.

See https://usefathom.com/docs/features/exclude.

this.$fathom.setSite(id: string)

Sets the site ID for tracking (overrides the ID used when loading Fathom).

Arguments
  • id - The site ID provided in the Fathom UI.

See advanced options for tracking.

💖 Sponsor

If you enjoy the this package, please consider becoming a sponsor or leave a tip or use my referral link for https://usefathom.com/ref/MQYHPK when signing up for fathom ❤️‍🔥 .

You might also like...

An even simpler wrapper around native Fetch to strip boilerplate from your fetching code!

An even simpler wrapper around native Fetch to strip boilerplate from your fetching code!

Super lightweight (~450 bytes) wrapper to simplify native fetch calls using any HTTP method (existing or imagined). Features Fully typed/TypeScript su

Dec 28, 2022

⚡⚙️ Fast prototyping with template engines and integrated frontend tools. Vituum is a small wrapper around Vite.

⚡⚙️ Fast prototyping with template engines and integrated frontend tools. Vituum is a small wrapper around Vite.

⚡ ⚙️ Vituum Still in early development. Fast prototyping with template engines and integrated frontend tools ⚡ Vite integrated 🚀️ Fast prototyping 🛠

Jan 3, 2023

P.S Its easy is a website to cater to all your PS allotment needs

P.S Its easy is a website to cater to all your PS allotment needs

P.S. It's Easy All-in-one Web App for all your Practice School Allotment needs! Note: Developers trying to fork and test. Please wait, we'll set up a

Sep 26, 2022

📜 Sharable eslint configuration rimac technology uses in all of its projects.

Eslint Config Usage Install the library as a dev dependency alongside required dependencies using yarn add -D @rimac-technology/eslint-config

Nov 23, 2022

"Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations and read random math-related quotes. Its built using react

Math Magician "Math magicians" is a website for all fans of mathematics. It is a Single Page App (SPA) that allows users to make simple calculations a

Feb 23, 2022

Tenzi is a dice game. The player needs to roll dice until they are all the same. Clicking on a dice, freezes it at its current value between rolls. Best scores are saved to local storage.

Tenzi is a dice game. The player needs to roll dice until they are all the same. Clicking on a dice, freezes it at its current value between rolls.  Best scores are saved to local storage.

Roll until all dice are the same Try me! Technologies Used Description Tenzi is a dice game used to demonstrate the use of React Hooks (useState, useE

Nov 23, 2022

Serialize and deserialize any object and all of its references 🥣

Super Cereal 🥣 Serialize and deserialize any object and all of its references. Supports: Class (with inheritance set-up) Object Array Function Map Se

Dec 24, 2022

Serialize and deserialize any object and all of its references 🥣

Super Cereal 🥣 Serialize and deserialize any object and all of its references. Supports: Class (with inheritance set-up) Object Array Function Map Se

Nov 1, 2022
Releases(v1.0.3)
Owner
wellá
Do you like cats? 🐈
wellá
Can see everything, beware of its omniscience, kneel before its greatness.

Can see everything, beware of its omniscience, kneel before its greatness. Summary Presentation Installation Removing Credits Presentation Main goal T

Duc Justin 3 Sep 30, 2022
🌉 Experience Nuxt 3 features on existing Nuxt 2 projects

?? Nuxt Bridge Experience Nuxt 3 features on existing Nuxt 2 projects. Bridge is a forward-compatibility layer that allows you to experience many of t

Nuxt 180 Jan 5, 2023
It is a tours website for showing the information about all the tours of this company and making the clients able to book them.

NATOURS APP Table of Contents Deployed Website Built With Getting Started Description Documentation Screenshots Deployed Website : NOTE: Heroku is pla

null 3 Sep 24, 2022
Thin wrapper around Rant-Lang for Obsidian.md

Obsidian Rant-Lang Thin wrapper around the Rant language Rust crate to be used in Obsidian. "Rant is a high-level procedural templating language with

Leander Neiss 10 Jul 12, 2022
A thin wrapper around arweave-js for versioned permaweb document management.

?? ar-wrapper A thin wrapper around arweave-js for versioned permaweb document management. Helps to abstract away complexity for document storage for

verses 8 May 12, 2022
A simple nodejs module which is wrapper around solc that allows you to compile Solidity code

Simple Solidity Compiler It's a simple nodejs module which is wrapper around solc that allows you to compile Solidity code and get the abi and bytecod

King Rayhan 4 Feb 21, 2022
A maybe slightly safer-ish wrapper around eval Function constructors

evalish A maybe slightly safer-ish wrapper around eval Function constructors Please maybe try something else first.. Please. evalish is a small helper

Phil Pluckthun 24 Sep 6, 2022
A jQuery plugin wrapper around Bootstrap Alerts, to create Notifications (Toasts)

bootstrap-show-notification A jQuery plugin wrapper around Bootstrap 4 Alerts, to show them as toasts (also called notifications) dynamically from Jav

Stefan Haack 10 Aug 22, 2022
A wrapper around IPFS for speeding up the loading of web3 frontend applications.

ipfs-wrapper A wrapper around ipfs-core for speeding up the loading of web3 frontend applications. Used on Blogchain. Requirements NodeJS v14.5.0 or h

Capsule Social 15 Sep 14, 2022
A maybe slightly safer-ish wrapper around eval Function constructors

evalish A maybe slightly safer-ish wrapper around eval Function constructors Please maybe try something else first.. Please. evalish is a small helper

0no.co 22 Aug 21, 2022