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.