How-to guideSourcesAvailable

Nuxt

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

Last reviewed July 25, 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',
  });
 
  // 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');
    }
  });
});

That’s it. 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:


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