nuxt-plausible v0.1.2

nuxt-plausible

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

# pnpm
pnpm add -D nuxt-plausible

# npm
npm i -D nuxt-plausible

Basic Usage

Add nuxt-plausible to your Nuxt config:

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

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

ℹ️ By default, nuxt-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({
  modules: ['nuxt-plausible'],

  // 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

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,
  options?: EventOptions,
  eventData?: PlausibleOptions,
): void

Example

// Tracks the `signup` goal
useTrackEvent('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(
  eventData?: PlausibleOptions,
  options?: EventOptions,
): void

💻 Development

1. Clone this repository
2. Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
3. Install dependencies using pnpm install
4. Run pnpm run dev:prepare
5. Start development server using pnpm run dev

Similar Packages

• vue-plausible, without first-class Nuxt 3 and composables.

Credits

• SVGBackgrounds.com for the OpenGraph image background pattern.

License

MIT License © 2022 Johann Schopplich