Install — Web

Install AnyReplay in Vue and Nuxt

Record Vue and Nuxt apps with AnyReplay: start the browser SDK in main.ts or a client-only Nuxt plugin, then track events and route changes from components.

Vue apps start the recorder where the app is created. Nuxt renders on the server as well, so the recorder goes into a plugin that only runs in the browser. An overview with masking and routing tips is in session replay for Vue and Nuxt.

Install

npm install @anyreplay/browser

pnpm add @anyreplay/browser

yarn add @anyreplay/browser

Vue 3

import { createRecorder } from '@anyreplay/browser';

export const recorder = createRecorder({
  projectKey: import.meta.env.VITE_ANYREPLAY_KEY,
});

import { createApp } from 'vue';
import './anyreplay';
import App from './App.vue';
import router from './router';

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

<script setup lang="ts">
import { recorder } from '@/anyreplay';

function subscribe(plan: string) {
  recorder.track('plan_selected', { plan });
}
</script>

<template>
  <button @click="subscribe('team')">Choose Team</button>
</template>

Vue Router in createWebHistory mode navigates with the History API, so route changes are recorded as page views with no extra code.

Nuxt 3

A file in plugins/ whose name ends in .client.ts runs only in the browser, which is exactly where the recorder belongs. Providing the handle makes it available to every component.

import { createRecorder } from '@anyreplay/browser';

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();
  const recorder = createRecorder({
    projectKey: config.public.anyreplayKey as string,
  });
  return { provide: { recorder } };
});

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      // override with NUXT_PUBLIC_ANYREPLAY_KEY
      anyreplayKey: '',
    },
  },
});

<script setup lang="ts">
const { $recorder } = useNuxtApp();

function startCheckout() {
  $recorder.track('checkout_started');
}
</script>

Script tag alternative

If you would rather not add a dependency, add the script tag to index.html in Vue, or to app.head.script in nuxt.config.ts, and call window.anyreplay('track', …) instead of the handle.