---
title: Nuxt
description: Monitor Nuxt applications with automatic route tracking and error reporting.
breadcrumbs: Docs > Integrations > Nuxt
---

# Nuxt
Supported OS Integration version1.0.0
{% callout %}
# Important note for users on the following Datadog sites: us2.ddog-gov.com

{% alert level="info" %}
To find out if this integration is available in your organization, see your [Datadog Integrations](https://app.datadoghq.com/integrations) page or ask your organization administrator.

To initiate an exception request to enable this integration for your organization, email [support@ddog-gov.com](mailto:support@ddog-gov.com).
{% /alert %}

{% /callout %}

## Overview{% #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.

## Prerequisites{% #prerequisites %}

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

## Setup{% #setup %}

Start by setting up [Datadog RUM](https://docs.datadoghq.com/real_user_monitoring/application_monitoring/browser/setup/client.md) in your Nuxt application.

After setting up RUM, add the [RUM-Nuxt plugin](https://www.npmjs.com/package/@datadog/browser-rum-nuxt) to the Browser SDK.

## Basic usage{% #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: '<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`

## Manual error reporting{% #manual-error-reporting %}

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

```vue
<script setup lang="ts">
import { onErrorCaptured } from 'vue'
import { addNuxtError } from '@datadog/browser-rum-nuxt'

onErrorCaptured((error, instance, info) => {
  addNuxtError(error, instance, info)
})
</script>
```

## Route tracking{% #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{% #go-further-with-datadog-nuxt-integration %}

### Traces{% #traces %}

Connect your RUM and trace data to get a complete view of your application's performance. See [Connect RUM and Traces](https://docs.datadoghq.com/tracing/other_telemetry/rum.md).

### Logs{% #logs %}

To forward your Nuxt application's logs to Datadog, see [JavaScript Logs Collection](https://docs.datadoghq.com/logs/log_collection/javascript.md).

### Metrics{% #metrics %}

To generate custom metrics from your RUM application, see [Generate Metrics](https://docs.datadoghq.com/real_user_monitoring/platform/generate_metrics.md).

## Troubleshooting{% #troubleshooting %}

Need help? Contact [Datadog Support](https://docs.datadoghq.com/help/).