Vue.js Integration

Usermaven provides official SDKs for both Vue 3 and Vue 2 applications. Our SDK offers powerful features including:

Automatic tracking of page views and user interactions
Cross-domain tracking support
Flexible event tracking with custom payloads
URL randomization to avoid PII collection
Namespace support for multiple tracking instances

Vue 3 Integration

For a complete working example, check out our Vue 3 Example App .

Installation

For Vue 3 applications, install the @usermaven/vue package:


npm install @usermaven/vue
# or
yarn add @usermaven/vue

Setup

Initialize the Usermaven plugin in your Vue 3 application’s main entry file (usually main.js or main.ts):


import { createApp } from 'vue'
import { UsermavenPlugin } from '@usermaven/vue'
import App from './App.vue'
 
const app = createApp(App)
 
app.use(UsermavenPlugin, {
    // Required Configuration
    key: 'your-api-key',           // Your Usermaven API key
    trackingHost: 'https://events.usermaven.com',  // Your tracking server URL
    
    // Optional Configuration
    autocapture: true,             // Enable automatic event capturing
    autoPageview: true,            // Automatically track page views
    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
})
 
app.mount('#app')

Using Composables

useUsermaven

The useUsermaven composable provides methods for tracking events and identifying users:


<script setup>
import { useUsermaven } from '@usermaven/vue'
 
const usermaven = useUsermaven()
 
// Track custom events
function onProductView(product) {
  usermaven.track('product_view', {
    productId: product.id,
    name: product.name,
    category: product.category,
    price: product.price
  })
}
 
// Identify users with detailed attributes
function onUserLogin() {
  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>
  <div>
    <button @click="onProductView(product)">View Product</button>
  </div>
</template>

usePageView

The usePageView composable handles page view tracking:


<script setup>
import { usePageView } from '@usermaven/vue'
 
// Automatically track page views
const _ = usePageView()
 
</script>

Vue 2 Integration

Installation

For Vue 2 applications, use the @usermaven/sdk-js package:


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

Plugin Setup

Create a plugin file (e.g., plugins/usermaven.js):


import Vue from 'vue'
import { usermavenClient } from '@usermaven/sdk-js'
 
export default {
  install(Vue) {
    // Initialize Usermaven with configuration
    const client = usermavenClient({
      // Required Configuration
      key: 'your-api-key',
      trackingHost: 'https://events.usermaven.com',
      
      // Optional Configuration
      autocapture: true,             // Enable automatic event capturing
      autoPageview: true,            // Automatically track page views
      randomizeUrl: false,           // Randomize URLs to avoid PII collection
      
      // Cross-domain Tracking ( Optional )
      crossDomainLinking: true,      // 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
    Vue.prototype.$usermaven = client
  }
}


import Vue from 'vue'
import UsermavenPlugin from './plugins/usermaven'
import App from './App.vue'
 
Vue.use(UsermavenPlugin)
 
new Vue({
  render: h => h(App)
}).$mount('#app')

Usage in Components

Track events and identify users in your Vue 2 components:


<template>
  <div>
    <button @click="trackPurchase">Complete Purchase</button>
  </div>
</template>
 
<script>
export default {
  name: 'CheckoutComponent',
  methods: {
    trackPurchase() {
      this.$usermaven.track('purchase_completed', {
        orderId: 'ORD-123',
        total: this.cart.total,
        currency: 'USD'
      })
    }
  },
  // Track page views
  mounted() {
    this.$usermaven.track('pageview', {
      title: document.title,
      path: this.$route.path
    })
  }
}
</script>

Route Change Tracking

Implement page view tracking with Vue Router:


// In your router configuration
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
 
Vue.use(VueRouter)
 
const router = new VueRouter({
  routes
})
 
router.afterEach((to, from) => {
  Vue.prototype.$usermaven.track('pageview', {
    title: document.title,
    path: to.path,
    referrer: from.path
  })
})
 
export default router

Configuration Options

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

key (required): Your Usermaven API key
trackingHost (required): The URL of your tracking server

Optional configurations:

autocapture: Enable automatic event capturing (default: false)
autoPageview: Automatically track page views (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’)

There are more options available in the documentation, but these are the most common ones. For a complete list, refer to the Reference Guide .