Session Replay for Vue

Session replay for Vue.js applications. Works with Vue 2 and Vue 3.

Quick Start

1. Install the package

npm install @puppethand/record

2. Initialize recording

main.ts

// main.ts
import { createApp } from 'vue';
import { record } from '@puppethand/record';
import App from './App.vue';

record({
  apiKey: 'ph_pub_xxx',
});

createApp(App).mount('#app');

3. View sessions in your dashboard

Sessions will appear in your PuppetHand dashboard within seconds of recording.

Vue-Specific Features

Vue 2 & Vue 3 support
Composition API compatible
Vuex/Pinia state tracking
Vue Router integration
Nuxt.js compatible

Configuration Options

Configuration

record({
  apiKey: 'ph_pub_xxx',

  // Optional configuration
  maskAllInputs: true,          // Mask all input values
  maskAllText: false,           // Mask all text content
  blockClass: 'ph-block',       // Block elements with this class
  ignoreClass: 'ph-ignore',     // Ignore elements with this class

  // Sampling (reduce data volume)
  sampling: {
    mousemove: true,            // Record mouse movements
    scroll: 100,                // Throttle scroll events (ms)
    input: 'last',              // Record only last input value
  },

  // Network recording
  recordNetwork: true,          // Record fetch/XHR requests
  recordConsole: true,          // Record console logs
});

Full Documentation

For advanced configuration, troubleshooting, and best practices, check out our full Vue documentation.

View Vue Docs

Ready to add session replay to Vue?

Start free with 10GB storage. Setup takes 30 seconds.

Start Free View Pricing