RUM Browser Monitoring - Vue integration

Note: This integration is in Preview. Features and configuration are subject to change.

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 (e.g. /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

Start by setting up Datadog RUM in your Vue application:

• If you are creating a RUM application, select Vue as the application type.
• If Vue is not available as an option, select JavaScript and follow the steps below to integrate the plugin manually.

After configuration, the Datadog App provides instructions for integrating the RUM-Vue plugin with the Browser SDK.

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

Basic usage

1. Initialize the Datadog RUM SDK with the Vue plugin

In your main.ts (or main.js):

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()],
})
Copy

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:

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')
Copy

Router view tracking

To automatically track route changes as RUM views, enable the router option in the plugin and use the Datadog createRouter wrapper instead of Vue Router's native one.

1. Initialize the RUM SDK with router tracking enabled

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 })],
})
Copy

2. Create your router with the Datadog wrapper

Replace Vue Router's createRouter with the one from @datadog/browser-rum-vue/vue-router-v4:

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 },
  ],
})
Copy

3. Wire everything together

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')
Copy

Route tracking

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

Go further with Datadog Vue integration

Traces

Connect your RUM and trace data to get a complete view of your application's performance. See Connect RUM and Traces.

Logs

To forward your Vue application's logs to Datadog, see JavaScript Logs Collection.

Metrics

To generate custom metrics from your RUM application, see Generate Metrics.

Troubleshooting

Need help? Contact Datadog Support.