> ## Documentation Index
> Fetch the complete documentation index at: https://docs.infinitewatch.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Vue.js

> Add InfiniteWatch session replay to your Vue application

## Overview

The `@infinitewatch/vue` SDK provides a Vue plugin that integrates session recording into your Vue app.

## Step 1: Installation

<CodeGroup>
  ```bash npm theme={null}
  npm install @infinitewatch/vue
  ```

  ```bash pnpm theme={null}
  pnpm add @infinitewatch/vue
  ```

  ```bash yarn theme={null}
  yarn add @infinitewatch/vue
  ```
</CodeGroup>

## Step 2: Environment Variables

Add to your `.env` file:

```bash theme={null}
VITE_INFINITEWATCH_ORG_ID=YOUR_ORGANIZATION_ID
```

<Info>
  Replace `YOUR_ORGANIZATION_ID` with your actual organization ID. You can find this in your [InfiniteWatch dashboard](https://app.infinitewatch.ai/dashboard/settings).
</Info>

## Step 3: Basic Setup

Register the plugin in your main entry file (e.g. `main.ts`):

```typescript theme={null}
import { createApp } from 'vue';
import { InfiniteWatchPlugin } from '@infinitewatch/vue';
import App from './App.vue';

const app = createApp(App);

app.use(InfiniteWatchPlugin, {
  organizationId: import.meta.env.VITE_INFINITEWATCH_ORG_ID,
});

app.mount('#app');
```

## Identify Users

After the plugin is set up, you can associate sessions with specific users:

```javascript theme={null}
InfiniteWatch.identify({
  external_id: 'user-12345',
  email: 'user@example.com',
  full_name: 'John Doe',
  metadata: {
    plan: 'premium',
    signup_date: '2024-01-15'
  }
});
```

<Note>
  Call `identify()` after the user logs in. The `external_id` is persisted in a cookie so it carries across page reloads and sessions.
</Note>