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 1 commit
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
67 changes: 67 additions & 0 deletions docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
---
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 need to configure the SDK a little differently to the default setup. This guide will show you how to set up the Sentry Nuxt 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. First, install the SDK with your package manager:

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

## Setup

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

### Adding the Plugin

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

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

2. **Add a Nitro plugin:**
Create a new file in `server/plugins` (for example, `server/plugins/sentry-cloudflare-setup.ts`).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

q: should we just be more opinionated here and just tell users to name it sentry-cloudflare-setup.ts?

Then we could consolidate step 2 and 3 together:

  1. Create a Nitro plugin:
    Create sentry-cloudflare-setup.ts in server/plugins:
    <code snippet here>

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as comment above: #14219 (comment)

The file name does not matter but it's indeed smart to have one step less. If we want to write a filename to the docs, we could name it sentry.cloudflare.config.ts to be in line with sentry.server.config.ts?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd just call it sentry-cloudflare-plugin.ts, seems most sensible to me. Naming it sentry.cloudflare.config.ts makes me think it would just need a Sentry.init in there.


3. **Add the following code to your plugin file:**

```TypeScript {filename:server/plugins/[custom-plugin-name].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/[custom-plugin-name].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 exposes features for first class integration with Vue and Nitro with Sentry's Nuxt SDK."
sidebar_order: 4
---

The Sentry Nuxt SDK offers Vue-specific features for first class integration with the framework.
The Sentry Nuxt SDK offers 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,12 @@
---
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 offers support for different Nitro deployment presets. Most of the deployment presets **work out-of-the-box** with the Sentry Nuxt SDK.
However, some deployment providers require additional configuration to ensure that Sentry works correctly.

## 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).