Setting the file. One moment.
Subchapter 38.9
references/rum-vue.mdMarkdown2 KBView on GitHub
Read rum-core.md first. Use this file for Vue applications that are not Nuxt.
Require Vue 3.5 or later. When router tracking is used, require Vue Router v4 or v5. Stop without editing for Vue 2, Vue 3.4 or earlier, or an unsupported router version.
Install @datadog/browser-rum and @datadog/browser-rum-vue at the same exact version.
Initialize before createApp(...):
import { datadogRum } from '@datadog/browser-rum'
import { vuePlugin } from '@datadog/browser-rum-vue'
datadogRum.init({
// ...canonical fields from rum-core.md...
plugins: [vuePlugin()],
})After creating the Vue app and before mounting it, register addVueError as the global handler:
import { addVueError } from '@datadog/browser-rum-vue'
const app = createApp(App)
app.config.errorHandler = addVueErrorIf app.config.errorHandler already exists, preserve it and add one addVueError(error, instance, info) call inside that handler or a small chaining wrapper. Do not overwrite custom behavior and do not report an error twice.
When the application actively uses Vue Router, initialize with vuePlugin({ router: true }) and replace only Vue Router’s createRouter import:
- import { createRouter } from 'vue-router'
+ import { createRouter } from '@datadog/browser-rum-vue/vue-router'Keep createWebHistory, createWebHashHistory, route types, and other exports imported from vue-router. The version-agnostic Datadog entrypoint supports the detected Vue Router v4 or v5; do not introduce the older vue-router-v4 path in new instrumentation.
Keep initialization, router construction, createApp, error-handler registration, app.use(router), and app.mount(...) in their existing lifecycle order.