Plausible Vue

This module productdevbook team created.

Plausible integration for Nuxt

Features

• Zero-config required
• Auto-import composables usePlausible()

Setup

pnpm add v-plausible

yarn add v-plausible

pnpm add v-plausible

Usage Vue 3

import { createPlausible } from 'v-plausible/vue'

const plausible = createPlausible({
  init: {
    domain: 'domain.com',
    apiHost: 'https://host.com',
    trackLocalhost: true,
  },
  settings: {
    enableAutoOutboundTracking: true,
    enableAutoPageviews: true,
  },
  partytown: false,
})

app.use(plausible)

Usage Nuxt 3

export default defineNuxtConfig({
  modules: [
    'v-plausible'
  ],
  plausible: {
    init: {
      domain: 'localhost',
      apiHost: 'https://site.com',
      trackLocalhost: true
    },
    // If this is loaded you can make it true, https://github.com/nuxt-modules/partytown
    partytown: false,
  }
})

Composables

<script setup lang="ts">
const { trackEvent } = usePlausible()
</script>

<template>
  <div>
    <button @click="trackEvent('nuxt')">
      click me
    </button>
  </div>
</template>

<script setup lang="ts">
const { trackPageview } = usePlausible()
</script>

Init Default

Plausible() accepts some options that you may want to provide:

| Option | Type | Description | Default | | -------------- | -------- | ----------------------------------------------------------------- | ------------------------ | | domain | string | Your site's domain, as declared by you in Plausible's settings | location.hostname | | hashMode | bool | Enables tracking based on URL hash changes. | false | | trackLocalhost | bool | Enables tracking on localhost. | false | | apiHost | string | Plausible's API host to use. Change this if you are self-hosting. | 'https://plausible.io' |

Settings Default

| Option | Type | Description | Default | | -------------- | -------- | ----------------------------------------------------------------- | ------------------------ | | enableAutoPageviews | bool | Your site's domain, as declared by you in Plausible's settings | true | | enableAutoOutboundTracking | bool | Enables tracking based on URL hash changes. | false |

💻 Development

• Clone this repository
• Enable Corepack using corepack enable (use npm i -g corepack for Node.js < 16.10)
• Install dependencies using pnpm install
• Stub module with pnpm dev:prepare
• Run pnpm dev to start playground in development mode

License

MIT License © 2022-PRESENT productdevbook

💚 Credits

Nuxt 3 Plugin danielroe

Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.

Sponsors

License

MIT License © 2022-PRESENT productdevbook