BeWe11 / vue-plausible

Plausible Analytics Vue.js Plugin and NuxtJS Module

Plausible Analytics for Vue.js and NuxtJS

Vue.js plugin and NuxtJS module for Plausible Analytics

Installation

Using npm:

npm install vue-plausible

Using yarn:

yarn add vue-plausible

Vue.js Plugin

import Vue from 'vue'
import { VuePlausible } from 'vue-plausible'

Vue.use(VuePlausible, {
  // see configuration section
})

Vue.$plausible.enableAutoPageviews() // optional

To enable automatic page view tracking for SPAs, call the enableAutoPageviews() method.

NuxtJS Module

// nuxt.config.js

export default {
  // ...
  modules: [
    'vue-plausible'
  ],
  plausible: {
    // see configuration section
  }
  // ...
}

Usage

vue-plausible uses the plausible-tracker package in the background.

Configuration

Configuration options are inherited from plausible-tracker:

Option	Type	Description	Default
domain	string	Your site's domain, as declared by you in Plausible's settings.	location.hostname
hashMode	boolean	Enables tracking based on URL hash changes.	false
trackLocalhost	boolean	Enables tracking on localhost.	false
apiHost	string	Plausible's API host to use. Change this if you are self-hosting.	https://plausible.io

Usage

The plausible-tracker package provides various methods to track specific events, for example trackPageview() and trackEvent(). You can find all the available methods and options in the plausible-tracker documentation. The Plausible instance is exposed to your Vue.js or NuxtJS app in the following ways:

• Vue.$plausible (Vue.js only)
• this.$plausible inside Vue components
• context.app.$plausible inside asyncData, fetch, plugins, middleware, nuxtServerInit (NuxtJS only)
• this.$plausible inside Vuex stores (NuxtJS only)

Author

I'm Moritz Sternemann, a computer-science student at Technical University of Munich.

• GitHub: @moritzsternemann
• Email: [e-mail]
• Twitter: @strnmn

License

This project is available under the MIT license. See the LICENSE file for more information.