Skip to content

Latest commit

 

History

History
102 lines (70 loc) · 2.99 KB

File metadata and controls

102 lines (70 loc) · 2.99 KB

Plausible

Plausible is a lightweight and open-source Google Analytics alternative. Your website data is 100% yours and the privacy of your visitors is respected.

alt text

Plausible integration for Nuxt

Setup

::code-group

pnpm add @huntersofbook/plausible-nuxt
yarn add @huntersofbook/plausible-nuxt
npm add @huntersofbook/plausible-nuxt

::

Nuxt Config

export default defineNuxtConfig({
  modules: [
    '@huntersofbook/plausible-nuxt'
  ],
  huntersofbookPlausible: {
    init: {
      domain: 'localhost',
      apiHost: 'https://site.com',
      trackLocalhost: true
    }
  }
})

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