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

Set up Datadog RUM 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 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

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:

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:

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

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

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:

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

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

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.