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.

Download Details:

Author: moritzsternemann

Source Code: https://github.com/moritzsternemann/vue-plausible

#vue #vuejs #javascript #nuxtjs