Nth Phonetic Mnemonic

    vue-plausible
    TypeScript icon, indicating that this package has built-in type declarations

    1.3.1 • Public • Published

    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:

    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 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.

    Install

    npm i vue-plausible

    DownloadsWeekly Downloads

    1,985

    Version

    1.3.1

    License

    MIT

    Unpacked Size

    19 kB

    Total Files

    27

    Last publish

    Collaborators

    • strnmn