simple-analytics-vue

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

import SimpleAnalytics from "simple-analytics-vue";
import Vue from "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:

import auth from "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";

const saEvent = inject("saEvent");

// e.g.: send event when liking a comment
const likeComment = (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.js

import SimpleAnalytics from "simple-analytics-vue";

export default defineNuxtPlugin((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.