Skip to content

productdevbookcom/v-plausible

Repository files navigation

Plausible Vue

Nuxt Typescript Bundle Template

Version Downloads License Github Stars

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

sponsors

License

MIT License © 2022-PRESENT productdevbook