Documentation - v7.0.0
    Preparing search index...

    Module @datadog/browser-rum-nuxt

    RUM Browser Monitoring - Nuxt integration

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

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

    • Automatic route change detection for Nuxt file-based routing
    • View name normalization that converts dynamic route segments into parameterized names (for example /user/123 becomes /user/[id])
    • Error reporting through both Vue's global error handler and Nuxt's app:error hook
    • 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.

    Start by setting up Datadog RUM in your Nuxt application.

    After configuration, add the RUM-Nuxt plugin to the Browser SDK.

    This integration requires Nuxt v3 or v4, Vue v3.5+, and Vue Router v4+.

    Create a client-side Nuxt plugin such as plugins/datadog-rum.client.ts and initialize the Datadog RUM SDK with nuxtRumPlugin:

    import { datadogRum } from '@datadog/browser-rum'
    import { nuxtRumPlugin } from '@datadog/browser-rum-nuxt'
    import { defineNuxtPlugin, useNuxtApp, useRouter } from 'nuxt/app'

    export default defineNuxtPlugin({
      name: 'datadog-rum',
      enforce: 'pre',
      setup() {
        datadogRum.init({
          applicationId: '<APP_ID>',
          clientToken: '<CLIENT_TOKEN>',
          site: 'datadoghq.com',
          plugins: [
            nuxtRumPlugin({
              router: useRouter(),
              nuxtApp: useNuxtApp(),
            }),
          ],
        })
      },
    })

    Using enforce: 'pre' lets the plugin capture startup errors reported through Nuxt's app:error hook before later plugins run.

    Passing nuxtApp is optional, but recommended. When provided, the integration automatically reports:

    • Vue component errors handled by vueApp.config.errorHandler
    • Nuxt startup errors reported through app:error

    If you catch a Nuxt or Vue error yourself and want to report it to Datadog RUM, use addNuxtError:

    The nuxtRumPlugin automatically tracks route changes as RUM views and normalizes dynamic segments to Nuxt-style file route names:

    Actual URL View name
    /about /about
    /user/123 /user/[id]
    /blog/test /blog/[[slug]]
    /guides/a/b/c /guides/[...slug]

    Query string changes do not create a new view, but hash changes do.

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

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

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

    Need help? Contact Datadog Support.

    Settings

    On This Page

    RUM Browser Monitoring - Nuxt integration