How-to guideSourcesAvailable

Vue

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

Last reviewed July 25, 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;
  }
}
 
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 });
}
 
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 tracks page views via router.afterEach, which also fires for the initial navigation — so the first page view and every route change are covered. Since SDK 0.2.0, init never sends a page view automatically; if you don’t use Vue Router, call window.vendo('page') yourself after init.

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');

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

Plugin Setup

Register the Plugin

Identify Users

Related