Using Sentry with Nuxt 3

At the time of writing the @nuxtjs/sentry package is not yet compatible with Nuxt 3.

Most of the instructions from the Sentry documentation for Vue 3 will apply, with some minor adjustments.

Start by installing the package dependencies:

npm install --save @sentry/vue @sentry/tracing

Add a new entry to your .env file for SENTRY_DSN that is set to your application DSN, and SENTRY_ENV set to the environment you’d like to report to Sentry.


Replace with your application’s DSN.

Update your nuxt.config.ts file to include this new config:

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      sentry: {
        dsn: process.env.SENTRY_DSN,
        env: process.env.SENTRY_ENV,

Then create a new plugin in your Nuxt 3 application: plugins/sentry.client.ts

iimport { defineNuxtPlugin, useRouter, useRuntimeConfig } from '#app';
import * as Sentry from '@sentry/vue';
import { BrowserTracing } from '@sentry/tracing';

export default defineNuxtPlugin((nuxtApp) => {
  const config = useRuntimeConfig();
  const router = useRouter();

    app: nuxtApp.vueApp,
    dsn: config.public.sentry.dsn,
    environment: config.public.sentry.env,
    integrations: [
      new BrowserTracing({
        routingInstrumentation: Sentry.vueRouterInstrumentation(router),
    tracesSampleRate: 1.0,

  return {
    provide: {
      sentry: Sentry,

That’s it! Your client side exceptions should now be showing up in Sentry. Hopefully the official plugin is updated soon to support Nuxt 3, but until then this should do the trick.

Questions or comments? Hit me up on twitter @ractoon