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