Nuxt3 Sentry Recipe

Nuxt3 Sentry Recipe is a companion GitHub repository that demonstrates how to integrate Sentry error tracking into a Nuxt 3 application on both the server and client sides.

What is Nuxt3 Sentry Recipe?

Nuxt3 Sentry Recipe is a small example repository that pairs with an article on lichter.io about adding Sentry to Nuxt 3. It takes a Nuxt 3 project and an environment file containing your Sentry DSN as input, and outputs a configured app that captures errors from the browser and from Nitro, Nuxt's server engine. The repository uses pnpm as its package manager and is structured as a "recipe" you can copy code from rather than a full application.

Key Features

• Dual-side Sentry integration — Sentry is set up to work for both client-side browser errors and server-side Nitro errors in a single Nuxt 3 app.
• Environment-based configuration — the setup depends on a .env.example file; you copy it and provide your Sentry DSN and other values before running the app.
• pnpm workflow — the documented commands are pnpm i and pnpm dev, making pnpm the package manager used throughout.
• Copy-paste friendly — the README explicitly says you can "just copy the code you are interested in" instead of cloning the entire repository.
• Companion blog post — the repository links to a detailed article at lichter.io/articles/nuxt3-sentry-recipe that walks through the integration step by step.
• Focused scope — the repo contains only the Sentry integration code, with no UI pages, styling, or unrelated boilerplate.

Who is it for?

Nuxt 3 developers who want to add Sentry error tracking to their applications and prefer a working example over reading API docs. Developers using the Nitro server engine who need to capture server-side errors in addition to frontend errors. Also useful for anyone already comfortable with Sentry who wants a quick Nuxt 3 setup reference. The recipe is minimal enough for beginners to follow while showing production-relevant configuration.

What can you do with Nuxt3 Sentry Recipe?

• Add error monitoring to a Nuxt 3 app — by setting up the Sentry SDK on client and server, you can view exceptions and crashes in your Sentry dashboard.
• Learn a working integration pattern — the repository shows where to initialize Sentry and how to wire it into Nuxt 3's lifecycle, backed by the linked article.
• Reuse the configuration in other projects — because the code is copyable, you can take the exact setup into your own Nuxt 3 application without installing the whole repo.

How does Nuxt3 Sentry Recipe work?

The workflow is: clone the repository, run pnpm i to install dependencies, run pnpm dev to start the Nuxt dev server, and provide an environment file based on .env.example with your Sentry credentials. Then exercise your app to trigger errors and watch them appear in Sentry. The article linked in the README provides deeper explanation of each step.

FAQ

Do I need a Sentry account to use this?

Yes. The recipe requires an environment variable containing a Sentry DSN, which you can get by creating a project in your Sentry account. Without a valid DSN, error events cannot be sent.

Does it work on both client and server?

Yes. The whole point of the recipe is to show Sentry integration on both the client side (browser) and server side (Nitro). You configure the SDK once and it captures errors from both environments.

What package manager does the repository use?

The repository uses pnpm. The setup instructions list pnpm i for installing dependencies and pnpm dev for starting the development server.

Can I use only part of the code?

Yes. The README says you can copy just the code you are interested in, so you can extract the Sentry integration pieces and paste them into your existing Nuxt 3 project.