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

# Vue 3

> Install Tracelit in a Vue 3 project. Works with Vite, Nuxt, and any Vue 3 setup. Automatic SPA route tracking included.

<img src="https://mintcdn.com/tracelit/yOAHPOHDFCUOtcaa/images/vuejs.svg?fit=max&auto=format&n=yOAHPOHDFCUOtcaa&q=85&s=7cd480b62d74672855f82b809745f336" alt="Vue" style={{ width: '40px', marginBottom: '4px' }} width="512" height="512" data-path="images/vuejs.svg" />

```bash theme={null}
npm install @tracelit/tracker
```

Call `init()` before mounting your app in `main.ts`:

```ts theme={null}
// src/main.ts
import { createApp } from 'vue'
import { init } from '@tracelit/tracker'
import App from './App.vue'

init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
createApp(App).mount('#app')
```

<Warning>
  Always set `environment`. Only `"production"` and `"development"` are accepted. If omitted, events default to `development`.
</Warning>

Tracelit detects route changes automatically via `history.pushState` — Vue Router works out of the box with no extra config.

***

## Adding user identity

Call `identify()` after your auth state resolves — for example, inside a composable or watcher:

```ts theme={null}
// composables/useTracelitIdentity.ts
import { watch } from 'vue'
import { identify, reset } from '@tracelit/tracker'
import { useAuth } from '@/composables/useAuth'

export function useTracelitIdentity() {
  const { user } = useAuth()

  watch(user, (u) => {
    if (u) identify(u.id, { email: u.email, plan: u.plan })
    else reset()
  }, { immediate: true })
}
```

Then call it in your root `App.vue`:

```vue theme={null}
<!-- App.vue -->
<script setup>
import { useTracelitIdentity } from '@/composables/useTracelitIdentity'
useTracelitIdentity()
</script>

<template>
  <RouterView />
</template>
```

***

## LLM Prompt

Paste this into your coding assistant to install Tracelit for you:

```text theme={null}
Install Tracelit in my Vue 3 project.
Use @tracelit/tracker and initialize it in src/main.ts with:
init({ token: 'YOUR_TOKEN_HERE', environment: 'production' })
Keep edits minimal, list changed files, and provide a quick verify checklist.
```

***

## What's next?

| Topic                                   | Description                                   | Guide                             |
| --------------------------------------- | --------------------------------------------- | --------------------------------- |
| <Icon icon="user" /> **Identify users** | Full guide to linking sessions to real users. | [Read](/tracking/identify-users)  |
| <Icon icon="tag" /> **Feature tagging** | Tag flows in session replays.                 | [Read](/features/feature-tagging) |