Nuxt

Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry.

We've released version 8 of the JavaScript SDKs. If you're using version 7.x, we recommend upgrading to the latest version. Check out the Migration docs to learn how to make the switch.

Don't have a Sentry account? Sign up for Sentry for free, then return to this page.

Sentry captures data by using an SDK within your application’s runtime.

Copied
npm install @sentry/nuxt --save

Configuration should happen as early as possible in your application's lifecycle.

To set up the Sentry SDK, register the Sentry Nuxt module and initialize the SDK for client and server. At build time, the Sentry Nuxt Module looks for the following two files:

  • Client-Side: sentry.client.config.(js|ts) in the root containing Sentry.init
  • Server-Side: instrument.server.mjs in the public directory containing Sentry.init

In these files, you can specify the full range of Sentry SDK options.

Add the Sentry Nuxt Module to your nuxt.config.ts file:

nuxt.config.ts
Copied
export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
});

Adding this module enables the Sentry SDK in your Nuxt application. The Sentry Nuxt Module will then automatically look for the Sentry configuration files and initialize the SDK accordingly.

Add a sentry.client.config.ts file to the root of your project (this is probably the same level as the package.json). In this file, import and initialize Sentry, specifying any SDK options for the client:

sentry.client.config.ts
Copied
import * as Sentry from "@sentry/nuxt";

Sentry.init({
  // If set up, you can use your runtime config here
  // dsn: useRuntimeConfig().public.sentry.dsn,
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",

  // We recommend adjusting this value in production, or using tracesSampler
  // for finer control
  tracesSampleRate: 1.0,
});

  1. Add a sentry.server.config.ts file to the root of your project:
sentry.server.config.ts
Copied
import * as Sentry from "@sentry/nuxt";

Sentry.init({
  dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
});

The Nuxt useRuntimeConfig() does not work in the Sentry server config due to technical reasons (the config file has to be loaded before Nuxt is loaded). To be able to use process.env you either have to add --env-file=.env to your node command or use the dotenv package:

Copied
node --env-file=.env --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs
  1. Add an --import flag to the Node options of your node command you run in production (not nuxt preview), so the file loads before any other imports (keep in mind the .mjs file ending). Depending on your setup, you might need to adjust the path to the sentry.server.config.mjs file:
package.json
Copied
{
  "scripts": {
    "preview": "nuxt preview",
    "start": "node --import ./.output/server/sentry.server.config.mjs .output/server/index.mjs"
  }
}

The Sentry Nuxt Module uses the Sentry Vite Plugin to upload source maps for both server and client builds. This means that when you run a production build (nuxt build), source maps will be generated and uploaded to Sentry, so that you get readable stack traces in your Sentry issues.

To upload source maps, specify your Sentry auth token as well as your org and project slugs. Set them in the sourceMapsUploadOptions option inside the sentry options of your nuxt.config.ts.

nuxt.config.ts
Copied
export default defineNuxtConfig({
  modules: ["@sentry/nuxt/module"],
  sentry: {
    sourceMapsUploadOptions: {
      org: "example-org",
      project: "example-project",
      authToken: "sntrys_YOUR_TOKEN_HERE",
    },
  },
});

This snippet includes an intentional error, so you can test that everything is working as soon as you set it up.

ErrorButton.vue
Copied
<script setup>
  const triggerError = () => {
    throw new Error("Nuxt Button Error");
  };
</script>

<template>
  <button id="errorBtn" @click="triggerError">Trigger Error</button>
</template>

Learn more about manually capturing an error or message in our Usage documentation.

To view and resolve the recorded error, log into sentry.io and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved.

Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").