Nuxt.js

Nuxt.js is a full-stack framework for JavaScript and TypeScript web applications.
This guide covers setting up Real User Monitoring for an existing Nuxt.js application using the Raygun4JS provider.


npm install raygun4js
yarn add raygun4js
bun add raygun4js

In the nuxt.config.js file in the root of your project, paste in your Raygun API Key:

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      raygun:{
        APIkey: 'paste_your_api_key_here',
      }
    }
  }
})

In the <root of you app>/plugins directory (if you don't have one, you can create it), add 1_raygun.client.ts:

import rg4js from "raygun4js";

export default defineNuxtPlugin((nuxtApp) => {
  rg4js('apiKey', nuxtApp.$config.public.raygun.APIkey);
  rg4js('enableRealUserMonitoring', true);
  rg4js('boot');
})

Plugins are loaded alphabetically. We start the file name with 1_ to begin monitoring as soon as possible.

The provider is open source and available at the Raygun4js repository.