V-plausible NPM

Plausible Vue

Nuxt Typescript Bundle Template

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