diff --git a/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx new file mode 100644 index 0000000000000..a20991624a23c --- /dev/null +++ b/docs/platforms/javascript/guides/cloudflare/frameworks/nuxt.mdx @@ -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/). + + + +If you installed the SDK before, make sure that `@sentry/nuxt` version `9.34.0` or newer is installed. + + + +Now you can install the Sentry Cloudflare SDK with your package manager: + + + +## Setup + + + +### 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, + } +})) +``` + + diff --git a/docs/platforms/javascript/guides/nuxt/features/index.mdx b/docs/platforms/javascript/guides/nuxt/features/index.mdx index 45d97a177d706..1396605e7e376 100644 --- a/docs/platforms/javascript/guides/nuxt/features/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/index.mdx @@ -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. diff --git a/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx b/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx new file mode 100644 index 0000000000000..63c5f1c73983d --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/nitro-deployment-presets.mdx @@ -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). diff --git a/docs/platforms/javascript/guides/nuxt/index.mdx b/docs/platforms/javascript/guides/nuxt/index.mdx index 202d9325e9275..00839f64cad95 100644 --- a/docs/platforms/javascript/guides/nuxt/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/index.mdx @@ -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) diff --git a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx index 4fe201ce24b95..5cfb6a66c6e7b 100644 --- a/docs/platforms/javascript/guides/nuxt/manual-setup.mdx +++ b/docs/platforms/javascript/guides/nuxt/manual-setup.mdx @@ -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)