Vue integration
Read rum-core.md first. Use this file for Vue applications that are not Nuxt.
Prerequisites and packages
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()],
})Error integration
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.
Router integration
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.