Nuxt

Add Vendo tracking to your Nuxt 3 app in two steps. First, load the snippet in nuxt.config. Then send a page view after each navigation from a client-side plugin.

Step 1: Load the Snippet

Copy the install snippet from your tracking source in Vendo. Do not write the snippet yourself: the snippet in the app has the correct write key and host.

In nuxt.config.ts, add the JavaScript of the snippet with app.head.script. Put only the code between <script> and </script> into innerHTML, and remove the line vendo('page');. Step 2 sends all page views.

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          // The snippet JavaScript from Vendo, without the vendo('page'); line.
          innerHTML: `...snippet JavaScript...`,
        },
      ],
    },
  },
});

Step 2: Track Page Views

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

// plugins/vendo.client.ts
export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.hook('page:finish', () => {
    (window as any).vendo('page');
  });
});

page:finish runs after the first page and after each client-side route change. Each route sends exactly one page view. Since SDK 0.2.0, init never sends a page view automatically.

Identify Users

Call identify once the user is authenticated:

// Send email only if your consent rules allow it.
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();
}

Related

• JavaScript SDK: Full method reference and configuration options
• Vue: Vue 3 plugin setup (Nuxt builds on Vue)
• Quickstart: Get started in 5 minutes