Vue

Integrate Vendo web tracking with Vue 3 using a plugin and Vue Router.

Last reviewed September 15, 2026

Add Vendo tracking to your Vue 3 app with a plugin that initializes the SDK and tracks route changes.

Plugin Setup


// plugins/vendo-tracking.ts
import type { App } from 'vue';
import type { Router } from 'vue-router';
 
declare global {
  interface Window {
    vendo?: ((...args: unknown[]) => void) | { page: () => void };
  }
}
 
function installSnippet(writeKey: string, host: string) {
  const w = window as any;
  w['VendoObject'] = 'vendo';
  w.vendo =
    w.vendo ||
    function () {
      (w.vendo.q = w.vendo.q || []).push(Array.prototype.slice.call(arguments));
    };
  w.vendo.l = Date.now();
 
  const s = document.createElement('script');
  s.async = true;
  s.src = 'https://cdn.vendodata.com/sdk/v1/vendo.js';
  document.head.appendChild(s);
 
  w.vendo('init', writeKey, { host });
}
 
export function vendoTracking(writeKey: string, host: string) {
  return {
    install(app: App) {
      installSnippet(writeKey, host);
 
      const router = app.config.globalProperties.$router as Router | undefined;
      if (router) {
        router.afterEach(() => {
          if (typeof window.vendo === 'function') {
            window.vendo('page');
          } else {
            window.vendo?.page();
          }
        });
      }
    },
  };
}

Register the Plugin


// main.ts
import { createApp } from 'vue';
import { vendoTracking } from './plugins/vendo-tracking';
import App from './App.vue';
import router from './router';
 
const app = createApp(App);
app.use(router);
app.use(vendoTracking('YOUR_WRITE_KEY', 'https://YOUR_TRACKING_ENDPOINT'));
app.mount('#app');

The plugin tracks page views with router.afterEach, which also fires for the initial navigation. The first page view and every route change are covered. Since SDK 0.2.0, init never sends a page view automatically. If you do not use Vue Router, call window.vendo('page') yourself after init.

Identify Users

Call identify once the user is authenticated:


const traits = { email: user.email, name: user.name, plan: user.plan };
 
if (typeof window.vendo === 'function') {
  window.vendo('identify', user.id, traits);
} else {
  window.vendo?.identify(user.id, traits);
}

Call reset on logout to clear the stored identity. The SDK starts a new anonymous ID on the next page load:


if (typeof window.vendo === 'function') {
  window.vendo('reset');
} else {
  window.vendo?.reset();
}

JavaScript SDK: Full method reference and configuration options
Quickstart: Get started in 5 minutes

Plugin Setup

Register the Plugin

Identify Users

Related