Vue plugin

Simple Analytics is a clean, simple, and privacy-first analytics tool. Actionable data in a beautiful dashboard. It does not use cookies and you can bypass ad-blockers. Make sure to signup to get the most value out of this plugin.

Install

We support Vue 3 and Vue 2.

Vue 3

Just run this command to install Simple Analytics for Vue 3:

npm install simple-analytics-vue@3.1.0 --save

Vue 2

If you are using Vue 2, use version 2.x of this package. It will not get any updates. Install it with npm install simple-analytics-vue@2.x --save.

Import in app

Import the plugin and add it to Vue.use. You can add a skip option which will define when page views should be skipped. This can be useful if you want to skip page views from yourself when developing your app.

importSimpleAnalyticsfrom"simple-analytics-vue";importVuefrom"vue";Vue.use(SimpleAnalytics,{skip: process.env.NODE_ENV!=="production"});

You can also pass a function or promise to skip which will be validated before injecting the Simple Analytics embed code:

importauthfrom"lib/auth";Vue.use(SimpleAnalytics,{skip: auth.isAdminPromise});

You can also optionally specify a custom domain to bypass ad blockers. Read more about this in our documentation.

Vue.use(SimpleAnalytics,{domain: "api.example.com"});

Events

To send an event, inject the saEvent method into your Vue 3 setup script like so:

// ~/src/components/Comment.vue
<script setup>import { inject } from"vue";constsaEvent=inject("saEvent");// e.g.: send event when liking a commentconstlikeComment= (comment) => {saEvent(`comment_like_${comment.id}`);};</script>

Read more about the Vue inject method here.

Note: Simple Analytics does not run on localhost.
You can still fire events, but they will be captured and logged in the console for debugging purposes.

Nuxt

Create a Nuxt client-side plugin like so:

// ~/plugins/simple-analytics.client.jsimportSimpleAnalyticsfrom"simple-analytics-vue";exportdefaultdefineNuxtPlugin((nuxtApp)=>{nuxtApp.vueApp.use(SimpleAnalytics,{skip: process.env.NODE_ENV!=="production",});});

If you need any additional configuration options (as the ones mentioned above), you just need to apply to your plugin.