Skip to Content
Integrations & SDKsNuxt.js

Nuxt.js Integration

Usermaven provides integration support for Nuxt.js applications through our core SDK. Our SDK offers:

  • Automatic page view tracking
  • Cross-domain tracking support
  • Flexible event tracking with custom payloads
  • URL randomization to avoid PII collection
  • Namespace support for multiple tracking instances

Installation

Install the Usermaven core package:

npm install @usermaven/sdk-js # or yarn add @usermaven/sdk-js

Setup

Plugin Setup

Create a new file plugins/usermaven.client.ts to initialize Usermaven:

import { defineNuxtPlugin } from '#app' import { usermavenClient } from '@usermaven/sdk-js' export default defineNuxtPlugin((nuxtApp) => { // Initialize Usermaven const usermaven = usermavenClient({ // Required Configuration key: 'your-api-key', trackingHost: 'https://events.usermaven.com', // Optional Configuration autocapture: true, // Enable automatic event capturing randomizeUrl: false, // Randomize URLs to avoid PII collection // Cross-domain Tracking (Optional) crossDomainLinking: false, // Enable cross-domain tracking domains: 'example.com,example.org', // Specify allowed domains // Advanced Configuration (Optional) namespace: 'my-app' // Custom namespace for multiple tracking instances }) // Make usermaven available globally nuxtApp.provide('usermaven', usermaven) })

Page View Tracking

Set up page view tracking in your app.vue:

<script setup> import { useNuxtApp } from '#app' import { onMounted, watch } from 'vue' import { useRoute } from 'vue-router' const { $usermaven } = useNuxtApp() const route = useRoute() // Track initial page view onMounted(() => { $usermaven.track('pageview') }) // Track page views on route changes watch(() => route.fullPath, (newPath) => { $usermaven.track('pageview') }) </script> <template> <NuxtPage /> </template>

Usage in Components

Tracking Custom Events

Track custom events in your components:

<script setup> import { useNuxtApp } from '#app' const { $usermaven } = useNuxtApp() const handleButtonClick = () => { $usermaven.track('button_click', { buttonId: 'submit-button', page: 'checkout', value: 99.99 }) } </script> <template> <button @click="handleButtonClick"> Click Me </button> </template>

Identifying Users

Identify users and set their properties:

<script setup> import { useNuxtApp } from '#app' const { $usermaven } = useNuxtApp() const identifyUser = () => { $usermaven.id({ // Required attributes id: 'lzL24K3kYw', // Unique ID for the user in database email: 'user@domain.com', // Email address for the user created_at: '2021-01-20T09:55:35', // DateTime string when user first signed up // Recommended attributes first_name: 'John', last_name: 'Smith', // Optional attributes custom: { plan_name: 'premium', }, // Company attributes (for multi-user products) company: { // Required Attributes id: 'uPq9oUGrIt', // Company ID in your database name: 'Usermaven', // Company Name in your database created_at: '2021-01-20T09:55:35', // DateTime string when company first signed up // Optional attributes custom: { plan: 'enterprise', industry: 'Technology', website: 'https://usermaven.com', employees: 20 } } }) } </script> <template> <button @click="identifyUser"> Update Profile </button> </template>

Configuration Options

Here’s a detailed explanation of all available configuration options:

Required:

  • key: Your Usermaven API key
  • trackingHost: The URL of your tracking server

Optional:

  • autocapture: Enable automatic event capturing (default: false)
  • randomizeUrl: Randomize URLs to avoid PII collection (default: false)
  • namespace: Custom namespace for multiple tracking instances
  • crossDomainLinking: Enable cross-domain tracking (default: false)
  • domains: Specify allowed domains for cross-domain tracking (e.g., ‘example.com,example.org’)

For a complete list of configuration options, refer to the Reference Guide.

Example App

For a complete working example, check out our Nuxt.js Example App.

Last updated on