From 484fb2fc73c3f39d0e060718245994ee63921347 Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Wed, 29 Apr 2026 15:13:59 +0200 Subject: [PATCH 1/4] add nuxt tile --- rum_nuxt/CHANGELOG.md | 7 +++ rum_nuxt/README.md | 108 +++++++++++++++++++++++++++++++++++++++++ rum_nuxt/manifest.json | 34 +++++++++++++ 3 files changed, 149 insertions(+) create mode 100644 rum_nuxt/CHANGELOG.md create mode 100644 rum_nuxt/README.md create mode 100644 rum_nuxt/manifest.json diff --git a/rum_nuxt/CHANGELOG.md b/rum_nuxt/CHANGELOG.md new file mode 100644 index 0000000000..ea81f15fe8 --- /dev/null +++ b/rum_nuxt/CHANGELOG.md @@ -0,0 +1,7 @@ +# CHANGELOG - Nuxt + +## 1.0.0 + +**Added**: + +* Initial Nuxt RUM Integration Tile. diff --git a/rum_nuxt/README.md b/rum_nuxt/README.md new file mode 100644 index 0000000000..2bb2b93a4e --- /dev/null +++ b/rum_nuxt/README.md @@ -0,0 +1,108 @@ +# RUM Browser Monitoring - Nuxt integration + +## Overview + +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. + +## Setup + +Start by setting up [Datadog RUM][1] in your Nuxt application. + +After configuration, add the [RUM-Nuxt plugin][2] to the Browser SDK. + +This integration requires **Nuxt v3 or v4**, **Vue v3.5+**, and **Vue Router v4+**. + +## Basic usage + +Create a client-side Nuxt plugin such as `plugins/datadog-rum.client.ts` and initialize the Datadog RUM SDK with `nuxtRumPlugin`: + +```ts +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: '', + clientToken: '', + 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` + +## Manual error reporting + +If you catch a Nuxt or Vue error yourself and want to report it to Datadog RUM, use `addNuxtError`: + +```vue + +``` + +## Route tracking + +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. + +## Go further with Datadog Nuxt integration + +### Traces + +Connect your RUM and trace data to get a complete view of your application's performance. See [Connect RUM and Traces][3]. + +### Logs + +To forward your Nuxt application's logs to Datadog, see [JavaScript Logs Collection][4]. + +### Metrics + +To generate custom metrics from your RUM application, see [Generate Metrics][5]. + +## Troubleshooting + +Need help? Contact [Datadog Support][6]. + +[1]: https://docs.datadoghq.com/real_user_monitoring/browser/setup/client +[2]: https://www.npmjs.com/package/@datadog/browser-rum-nuxt +[3]: https://docs.datadoghq.com/real_user_monitoring/platform/connect_rum_and_traces/?tab=browserrum +[4]: https://docs.datadoghq.com/logs/log_collection/javascript/ +[5]: https://docs.datadoghq.com/real_user_monitoring/generate_metrics +[6]: https://docs.datadoghq.com/help/ diff --git a/rum_nuxt/manifest.json b/rum_nuxt/manifest.json new file mode 100644 index 0000000000..bec3b4a302 --- /dev/null +++ b/rum_nuxt/manifest.json @@ -0,0 +1,34 @@ +{ + "manifest_version": "2.0.0", + "app_uuid": "0bbcbba0-1ebc-423d-905f-4320f615fe15", + "app_id": "rum-nuxt-plugin", + "owner": "rum-browser", + "display_on_public_website": true, + "tile": { + "overview": "README.md#Overview", + "configuration": "README.md#Setup", + "support": "README.md#Troubleshooting", + "changelog": "CHANGELOG.md", + "description": "Monitor Nuxt applications with automatic route tracking and error reporting using Datadog RUM", + "title": "Nuxt", + "media": [], + "classifier_tags": [ + "Category::Metrics", + "Category::Network", + "Category::Tracing", + "Supported OS::Android", + "Supported OS::Linux", + "Supported OS::Windows", + "Supported OS::iOS", + "Supported OS::macOS", + "Offering::Integration" + ] + }, + "author": { + "support_email": "help@datadoghq.com", + "name": "Datadog", + "homepage": "https://www.datadoghq.com", + "sales_email": "info@datadoghq.com" + }, + "assets": {} +} From bcbcb4ac2129184964f195980215530baffa9205 Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Thu, 30 Apr 2026 08:27:07 +0200 Subject: [PATCH 2/4] Add CODEOWNERS for browser-sdk-nuxt-plugin --- .github/CODEOWNERS | 1 + 1 file changed, 1 insertion(+) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index e854f9a935..1572cef57e 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -186,6 +186,7 @@ code-coverage.datadog.yml @DataDog/agent-integr /rum_expo/ @DataDog/rum-app @DataDog/rum-mobile /rum_flutter/ @DataDog/rum-app @DataDog/rum-mobile /rum_ios/ @DataDog/rum-app @DataDog/rum-mobile @DataDog/rum-mobile-ios +/rum_nuxt/ @DataDog/rum-app @DataDog/rum-browser /rum_nextjs/ @DataDog/rum-app @DataDog/rum-browser /rum_react/ @DataDog/rum-app @DataDog/rum-browser /rum_react_native/ @DataDog/rum-app @DataDog/rum-mobile From 87593846d3c1f3aa87b3d8e8b83a872112ceef2e Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Thu, 30 Apr 2026 10:55:19 +0200 Subject: [PATCH 3/4] Fix CODEOWNERS order. --- .github/CODEOWNERS | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 1572cef57e..3412e2a8b5 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -186,8 +186,8 @@ code-coverage.datadog.yml @DataDog/agent-integr /rum_expo/ @DataDog/rum-app @DataDog/rum-mobile /rum_flutter/ @DataDog/rum-app @DataDog/rum-mobile /rum_ios/ @DataDog/rum-app @DataDog/rum-mobile @DataDog/rum-mobile-ios +/rum_nextjs/ @DataDog/rum-app @DataDog/rum-browser /rum_nuxt/ @DataDog/rum-app @DataDog/rum-browser -/rum_nextjs/ @DataDog/rum-app @DataDog/rum-browser /rum_react/ @DataDog/rum-app @DataDog/rum-browser /rum_react_native/ @DataDog/rum-app @DataDog/rum-mobile /rum_roku/ @DataDog/rum-app @DataDog/rum-mobile From e956c922bc179f14464089d171cd1ca3e599374f Mon Sep 17 00:00:00 2001 From: "beltran.bulbarella" Date: Mon, 11 May 2026 12:58:39 -0300 Subject: [PATCH 4/4] Addressed PR comments --- rum_nuxt/README.md | 18 ++++++++++-------- rum_nuxt/manifest.json | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/rum_nuxt/README.md b/rum_nuxt/README.md index 2bb2b93a4e..29f18e1b4f 100644 --- a/rum_nuxt/README.md +++ b/rum_nuxt/README.md @@ -5,19 +5,21 @@ 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]`) +- **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. +## Prerequisites + +This integration requires Nuxt v3 or v4, Vue v3.5+, and Vue Router v4+. + ## Setup Start by setting up [Datadog RUM][1] in your Nuxt application. -After configuration, add the [RUM-Nuxt plugin][2] to the Browser SDK. - -This integration requires **Nuxt v3 or v4**, **Vue v3.5+**, and **Vue Router v4+**. +After setting up RUM, add the [RUM-Nuxt plugin][2] to the Browser SDK. ## Basic usage @@ -56,7 +58,7 @@ Passing `nuxtApp` is optional, but recommended. When provided, the integration a ## Manual error reporting -If you catch a Nuxt or Vue error yourself and want to report it to Datadog RUM, use `addNuxtError`: +If you catch a Nuxt or Vue error and want to report it to Datadog RUM, use `addNuxtError`: ```vue