Plausible Vue
This module productdevbook team created.
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(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
Thanks to @surmon-china, this project loadScript function is heavily inspired by surmon-china.github.io.
Sponsors
License
MIT License © 2022-PRESENT productdevbook