Skip to content

docs(nuxt): Add docs for Cloudflare Nitro plugin #14219

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 1, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
---
title: Nuxt on Cloudflare
description: "Learn how to add Cloudflare instrumentation to your Nuxt app."
---

If you're running your Nuxt app on Cloudflare Pages, you'll need to configure the Sentry Nuxt SDK slightly differently than the default setup.
This guide will show you how to set up the SDK with Nitro's `cloudflare-pages` deployment preset.

## Install

First, install the Sentry Nuxt SDK in your application. We recommend using the Sentry wizard to automatically install the SDK:

```bash
npx @sentry/wizard@latest -i nuxt
```

If the setup through the wizard doesn't work for you, you can also [set up the Nuxt SDK manually](/platforms/javascript/guides/nuxt/manual-setup/).

<Alert>

If you installed the SDK before, make sure that `@sentry/nuxt` version `9.34.0` or newer is installed.

</Alert>

Now you can install the Sentry Cloudflare SDK with your package manager:

<PlatformContent includePath="getting-started-install" />

## Setup

<PlatformContent includePath="getting-started-config" />

### Adding the Nitro Plugin

To enable Sentry for your Nuxt app on Cloudflare, follow these steps:

1. Delete the previous server config file `sentry.server.config.ts` if it exists.

2. Create a new file in `server/plugins` and add the following code to your plugin file:

```TypeScript {filename:server/plugins/sentry-cloudflare-plugin.ts}
import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'

export default defineNitroPlugin(sentryCloudflareNitroPlugin({
dsn: '___PUBLIC_DSN___',
tracesSampleRate: 1.0,
}))
```

Or, if you need access to `nitroApp`:

```TypeScript {filename:server/plugins/sentry-cloudflare-plugin.ts}
import { sentryCloudflareNitroPlugin } from '@sentry/nuxt/module/plugins'

export default defineNitroPlugin(sentryCloudflareNitroPlugin((nitroApp: NitroApp) => {
// You can access `nitroApp` here if needed
return {
dsn: '___PUBLIC_DSN___',
tracesSampleRate: 1.0,
}
}))
```


6 changes: 3 additions & 3 deletions docs/platforms/javascript/guides/nuxt/features/index.mdx
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Vue Features
description: "Learn how to exposes features for first class integration with Vue with Sentry's Nuxt SDK."
title: Nuxt Features
description: "Learn how to use Sentry's Nuxt SDK for first-class integration with Vue and Nitro."
sidebar_order: 4
---

The Sentry Nuxt SDK offers Vue-specific features for first class integration with the framework.
The Sentry Nuxt SDK offers support for Vue and Nitro-specific features for first-class integration with the framework.

<PageGrid />
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
title: Nitro Deployment Presets
description: "Learn how to set up monitoring of your application when using different Nitro deployment presets."
sidebar_order: 10
---

The Sentry Nuxt SDK provides support for different Nitro deployment presets, most of which **work out of the box**.

## Cloudflare Pages

Using the Cloudflare Nitro plugin of Sentry enables Sentry monitoring on Cloudflare Pages. Go and see the [Cloudflare Nitro plugin documentation](/platforms/javascript/guides/cloudflare/frameworks/nuxt).
1 change: 1 addition & 0 deletions docs/platforms/javascript/guides/nuxt/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
- Continue to [customize your configuration](/platforms/javascript/guides/nuxt/configuration/)
- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
- Learn how to [track your Vue components or your Pinia store](/platforms/javascript/guides/nuxt/features/)
- Learn how to [add support for different Nitro deployment presets](/platforms/javascript/guides/nuxt/features/nitro-deployment-presets/) (like Cloudflare)

<Expandable permalink={false} title="Are you having problems setting up the SDK?">

Expand Down
1 change: 1 addition & 0 deletions docs/platforms/javascript/guides/nuxt/manual-setup.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -343,6 +343,7 @@ Now's a good time to customize your setup and look into more advanced topics. Ou
- Continue to [customize your configuration](/platforms/javascript/guides/nuxt/configuration/)
- Get familiar with [Sentry's product features](/product) like tracing, insights, and alerts
- Learn how to [track your Vue components or your Pinia store](/platforms/javascript/guides/nuxt/features/)
- Learn how to [add support for different Nitro deployment presets](/platforms/javascript/guides/nuxt/features/nitro-deployment-presets/) (like Cloudflare)

<Expandable permalink={false} title="Are you having problems setting up the SDK?">

Expand Down