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.
Setup
pnpm
pnpm add @huntersofbook/plausibleVue Config
main.ts
import { createPlausible } from '@huntersofbook/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)Composables
<script setup lang="ts">const { trackEvent } = usePlausible()</script><template> <div> <button @click="trackEvent('vue')"> 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(usenpm i -g corepackfor Node.js < 16.10) - Install dependencies using
pnpm install - Stub module with
pnpm dev:prepare - Run
pnpm devto start playground in development mode
License
MIT License © 2022-PRESENT productdevbook
Credits 💚
Nuxt 3 Plugin danielroe
sponsor us