How-to guideSourcesAvailable

Nuxt

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

Last reviewed July 13, 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(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',
    trackPageViews: true,
  });
 
  // Track client-side navigations
  const router = useRouter();
  router.afterEach(() => {
    if (typeof w.vendo === 'function') {
      w.vendo('page');
    }
  });
});

That’s it. Nuxt auto-registers plugins from the plugins/ directory. The .client.ts suffix ensures it only runs in the browser.

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

Plugin Setup

Identify Users

Related