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.

Step 1: Install the Raygun4JS package

NPM

npm install raygun4js

Yarn

yarn add raygun4js

Bun

bun add raygun4js

Step 2: Enable Real User Monitoring

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',
      }
    }
  }
})

Make a plugin to configure Raygun

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.