vue-plausible
v1.3.2
Published
Plausible analytics as Vue.js and NuxtJS plugins
Downloads
3,686
Maintainers
Readme
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
})
To enable automatic page view tracking for SPAs, call the enableAutoPageviews()
method.
To enable automatic outbound link tracking, call the enableAutoOutboundTracking()
method.
NuxtJS Module
// nuxt.config.js
// optional when using nuxt.config.ts
/// <reference types="vue-plausible" />
export default {
modules: [
'vue-plausible'
]
}
Module Options
Add a plausible
section to nuxt.config.js
to set the module options:
// nuxt.config.js
export default {
plausible: {
// see configuration section
}
}
Runtime Config
To use dynamic environment variables in production, use publicRuntimeConfig
.
Otherwise, the configuration options passed in nuxt.config.js
will be read once and bundled during the build only.
See the configuration section for all available options.
// nuxt.config.js
export default {
buildModules: [
'vue-plausible'
],
plausible: { // Use as fallback if no runtime config is available at runtime
domain: process.env.PLAUSIBLE_DOMAIN
},
publicRuntimeConfig: {
plausible: {
domain: process.env.PLAUSIBLE_DOMAIN,
apiHost: process.env.PLAUSIBLE_API_HOST
}
}
}
Usage
vue-plausible
is based on the official plausible-tracker
package.
Configuration
Configuration options are inherited from plausible-tracker
:
| Option | Type | Description | Default |
| ------ | ---- | ----------- | ------- |
| domain | string
| Your site's domain name, 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
|
|||||
| enableAutoPageviews | boolean
| Enables automatic pageview tracking in SPAs. Learn more | true
|
| enableAutoOutboundTracking | boolean
| Enables automatic outbound link click tracking. Learn more | false
|
Integration
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 componentscontext.app.$plausible
inside asyncData, fetch, plugins, middleware, nuxtServerInit (NuxtJS only)this.$plausible
inside Vuex stores (NuxtJS only)
Proxying
To use proxying as described in the Plausible 'Using a proxy' documentation, you need to adjust the apiHost
configuration option accordingly.
Using vue-plausible only requires to proxy the /api/event
endpoint since the frontend code is already bundled from plausible-tracker
.
Please note that event endpoint path always ends with /api/event
. See the following example:
plausible: {
apiHost: 'https://<yourdomain.com>/stats' // Reports events to https://<yourdomain.com>/stats/api/event
}
Opt out
To exclude yourself from the analytics, plausible-tracker
offers an opt-out mechanism that can be activated by setting the localStorage.plausible_ignore
value to true
.
More information can be found in the Plausible documentation.
Author
I'm Moritz Sternemann, a computer-science student at Technical University of Munich.
- GitHub: @moritzsternemann
- Email: [email protected]
- Twitter: @strnmn
License
This project is available under the MIT license. See the LICENSE file for more information.