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 (opens in a new tab).

Example App

For a complete working example, check out our Nuxt.js Example App (opens in a new tab).

Vue.js Angular