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.

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

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

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

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
        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('enableRUM', true);

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

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

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