Nuxt

Integrate Vendo web tracking with Nuxt 3 using a client-side plugin.

Last reviewed September 15, 2026

Add Vendo tracking to your Nuxt 3 app with a client-side plugin.

Plugin Setup

Create a plugin file with the .client.ts suffix so it only runs in the browser:


// plugins/vendo-tracking.client.ts
export default defineNuxtPlugin(() => {
  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', 'YOUR_WRITE_KEY', {
    host: 'https://YOUR_TRACKING_ENDPOINT',
  });
 
  // Track page views (initial navigation + client-side route changes).
  // Since SDK 0.2.0, init never sends a page view automatically.
  const router = useRouter();
  router.afterEach(() => {
    if (typeof w.vendo === 'function') {
      w.vendo('page');
    } else {
      w.vendo?.page();
    }
  });
});

No other setup is needed. Nuxt auto-registers plugins from the plugins/ directory. The .client.ts suffix ensures it only runs in the browser. router.afterEach also fires for the initial navigation, so the first page view is covered.

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
Vue: Vue 3 plugin setup (Nuxt builds on Vue)
Quickstart: Get started in 5 minutes

Plugin Setup

Identify Users

Related