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 - Installation

Add the provider packages

Use yarn (or npm, bun, etc.) to add the following packages:

yarn add raygun4js
yarn add --dev @types/raygun4js

Add your API Key to the config

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('enableRUM', true);
  rg4js('boot');
})

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

Step 2 - Release

Deploy Raygun into your production environment. As users navigate around your app, events will be sent, and the Raygun app will automatically update.