Skip to Content
SourcesTracking SDKVue

Vue 3

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;
  }
}
 
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(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, trackPageViews: true });
}
 
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');
          }
        });
      }
    },
  };
}

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 automatically tracks page views on every route change via router.afterEach.

Identify Users

Call identify once the user is authenticated:

window.vendo('identify', user.id, {
  email: user.email,
  name: user.name,
  plan: user.plan,
});

Call reset on logout to clear the identity:

window.vendo('reset');
Last updated on
Next.jsNuxt