plausible

Nuxt 3 module to natively integrate Plausible analytics

Nuxt Plausible module

Nuxt Plausible

npm version

This module provides a minimal Plausible tracker integration with Nuxt.

Features

  • 🌻 No configuration necessary
  • 📯 Track events and page views manually with composables
  • 📂 .env file support
  • 🧺 Sensible default options
  • 🦾 SSR-ready

Setup

# pnpmpnpm add -D @nuxtjs/plausible# npmnpm i -D @nuxtjs/plausible

Basic Usage

Add @nuxtjs/plausible to your Nuxt config:

// `nuxt.config.ts`export default defineNuxtConfig({  modules: ['@nuxtjs/plausible']})

Done! Plausible will now run in your application's client.

ℹ️ By default, @nuxtjs/plausible will use window.location.hostname for the Plausible domain configuration key, which will suit most users.

Configuration

All supported module options can be set by either the module options key plausible, or the public runtime config key with the same name.

export default defineNuxtConfig({    // Configure using the module options  plausible: {    domain: 'example.com'  },  // **Or** the public runtime config instead  runtimeConfig: {    public: {      plausible: {        domain: 'example.com'      }    }  }})

Alternatively, leveraging automatically replaced public runtime config values by matching .env variables at runtime, set your desired option in your project's .env file:

# Sets the `plausible` public runtime config value for the key `domain`NUXT_PUBLIC_PLAUSIBLE_DOMAIN=example.com

Module Options

OptionTypeDescriptionDefault
hashModebooleanWhether page views shall be tracked when the URL hash changes. Enable this if your Nuxt app has the hashMode router option enabled.false
trackLocalhostbooleanWhether events shall be tracked when running the site locally.false
domainstringThe domain to bind tracking event to.window.location.hostname
apiHoststringThe API host where the events will be sent to.https://plausible.io
autoPageviewsbooleanTrack the current page and all further pages automatically. Disable this if you want to manually manage pageview tracking.true
autoOutboundTrackingbooleanTrack all outbound link clicks automatically. If enabled, a MutationObserver automagically detects link nodes throughout the application and binds click events to them.false

Composables

As with other composables in the Nuxt 3 ecosystem, the following ones are available without the need of importing them.

ℹ️ Since the Plausible instance is available in the client only, calling the tracking composables will have no effect. They will exit gracefully on the server.

useTrackEvent

Track a custom event. Track your defined goals by passing the goal's name as the argument eventName.

Type Declarations

function useTrackEvent(  eventName: string,  optionsEventOptions,  eventDataPlausibleOptions): void

Example

// Tracks the `signup` goaluseTrackEvent('signup')// Tracks the `Download` goal passing a `method` property.useTrackEvent('Download', { props: { method: 'HTTP' } })

useTrackPageview

Manually track a page view.

Pass optional event data to be sent with the eventData argument. Defaults to the current page's data merged with the default options provided during the Plausible initialization.

Type Declarations

function useTrackPageview(  eventDataPlausibleOptions,  optionsEventOptions): void

💻 Development

  1. Clone this repository
  2. Enable Corepack using corepack enable
  3. Install dependencies using pnpm install
  4. Run pnpm run dev:prepare
  5. Start development server using pnpm run dev

Similar Packages

Credits

License

MIT License © 2022 Johann Schopplich