---
title: Vue
description: Monitor Vue 3 applications with automatic route tracking using Datadog RUM
breadcrumbs: Docs > Integrations > Vue
---

# Vue
Supported OS Integration version1.0.0
{% callout %}
# Important note for users on the following Datadog sites: us2.ddog-gov.com

{% alert level="info" %}
To find out if this integration is available in your organization, see your [Datadog Integrations](https://app.datadoghq.com/integrations) page or ask your organization administrator.

To initiate an exception request to enable this integration for your organization, email [support@ddog-gov.com](mailto:support@ddog-gov.com).
{% /alert %}

{% /callout %}

## Overview{% #overview %}

The Datadog RUM Vue integration provides framework-specific instrumentation to help you monitor and debug Vue 3 applications. This integration adds:

- **Automatic route change detection** using Vue Router v4
- **View name normalization** that maps dynamic route segments to their parameterized definitions (for example, `/users/123` becomes `/users/:id`)
- **Error reporting** through Vue's global error handler with full component stack traces
- **Full-stack visibility** by correlating frontend performance with backend traces and logs

Combined with Datadog RUM's core capabilities, you can debug performance bottlenecks, track user journeys, monitor Core Web Vitals, and analyze every user session with context.

## Setup{% #setup %}

Set up [Datadog RUM](https://docs.datadoghq.com/real_user_monitoring/browser/setup/client.md) in your Vue application:

- If you are creating a RUM application, select **Vue** as the application type. The Datadog App provides instructions for integrating the [RUM-Vue plugin](https://www.npmjs.com/package/@datadog/browser-rum-vue) with the Browser SDK.
- If Vue is not available as an option, select **JavaScript** and follow the steps below to integrate the plugin manually.

This integration requires **Vue v3.5+** and **Vue Router v4+** (if using router view tracking).

## Basic usage{% #basic-usage %}

To get started, initialize the RUM SDK with the Vue plugin and attach the error handler to your app.

### 1. Initialize the Datadog RUM SDK with the Vue plugin

Add the following to your `main.ts` (or `main.js`) file:

```javascript
import { datadogRum } from '@datadog/browser-rum'
import { vuePlugin } from '@datadog/browser-rum-vue'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  site: 'datadoghq.com',
  plugins: [vuePlugin()],
})
```

### 2. Attach the Vue error handler

Use `addVueError` as your application's global error handler to automatically report Vue errors to Datadog RUM with component stack traces:

```javascript
import { createApp } from 'vue'
import { addVueError } from '@datadog/browser-rum-vue'
import App from './App.vue'

const app = createApp(App)
app.config.errorHandler = addVueError
app.mount('#app')
```

## Router view tracking{% #router-view-tracking %}

To automatically track route changes as RUM views, enable the `router` option in the plugin then replace the Vue Router's native wrapper with Datadog's `createRouter` wrapper.

### 1. Initialize the RUM SDK with router tracking enabled

```javascript
import { datadogRum } from '@datadog/browser-rum'
import { vuePlugin } from '@datadog/browser-rum-vue'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  site: 'datadoghq.com',
  plugins: [vuePlugin({ router: true })],
})
```

### 2. Create your router with the Datadog wrapper

Import the `createRouter` from `@datadog/browser-rum-vue/vue-router-v4` instead of from `vue-router`:

```javascript
import { createWebHistory } from 'vue-router'
import { createRouter } from '@datadog/browser-rum-vue/vue-router-v4'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/users', component: Users },
    { path: '/users/:id', component: UserDetail },
  ],
})
```

### 3. Wire everything together

```javascript
import { createApp } from 'vue'
import { createWebHistory } from 'vue-router'
import { datadogRum } from '@datadog/browser-rum'
import { vuePlugin, addVueError } from '@datadog/browser-rum-vue'
import { createRouter } from '@datadog/browser-rum-vue/vue-router-v4'
import App from './App.vue'

datadogRum.init({
  applicationId: '<APP_ID>',
  clientToken: '<CLIENT_TOKEN>',
  site: 'datadoghq.com',
  plugins: [vuePlugin({ router: true })],
})

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/users', component: Users },
    { path: '/users/:id', component: UserDetail },
  ],
})

const app = createApp(App)
app.config.errorHandler = addVueError
app.use(router)
app.mount('#app')
```

## Route tracking{% #route-tracking %}

The `createRouter` wrapper automatically tracks route changes and normalizes dynamic segments into parameterized view names:

| Actual URL             | View name                  |
| ---------------------- | -------------------------- |
| `/about`               | `/about`                   |
| `/users/123`           | `/users/:id`               |
| `/users/123/posts/456` | `/users/:id/posts/:postId` |
| `/docs/a/b/c`          | `/docs/:pathMatch(.*)*`    |

## Go further with Datadog Vue integration{% #go-further-with-datadog-vue-integration %}

### Traces{% #traces %}

Connect your RUM and trace data to get a complete view of your application's performance. See [Connect RUM and Traces](https://docs.datadoghq.com/real_user_monitoring/platform/connect_rum_and_traces.md?tab=browserrum).

### Logs{% #logs %}

To forward your Vue application's logs to Datadog, see [JavaScript Logs Collection](https://docs.datadoghq.com/logs/log_collection/javascript.md).

### Metrics{% #metrics %}

To generate custom metrics from your RUM application, see [Generate Metrics](https://docs.datadoghq.com/real_user_monitoring/generate_metrics.md).

## Troubleshooting{% #troubleshooting %}

Need help? Contact [Datadog Support](https://docs.datadoghq.com/help/).