Socket
Socket
Sign inDemoInstall

vue-plausible

Package Overview
Dependencies
1
Maintainers
1
Versions
14
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

vue-plausible

Plausible analytics as Vue.js and NuxtJS plugins


Version published
Maintainers
1
Install size
90.1 kB
Created

Changelog

Source

1.3.2 (2022-07-13)

Bug Fixes

  • hotfix provide for nuxt 3 (#21) (1bbb6da)

Readme

Source

Plausible Analytics for Vue.js and NuxtJS

NPM

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:

OptionTypeDescriptionDefault
domainstringYour site's domain name, as declared by you in Plausible's settings.location.hostname
hashModebooleanEnables tracking based on URL hash changes.false
trackLocalhostbooleanEnables tracking on localhost.false
apiHoststringPlausible's API host to use. Change this if you are self-hosting.https://plausible.io
enableAutoPageviewsbooleanEnables automatic pageview tracking in SPAs. Learn moretrue
enableAutoOutboundTrackingbooleanEnables automatic outbound link click tracking. Learn morefalse

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 components
  • context.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.

License

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

Keywords

FAQs

Last updated on 13 Jul 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc