Nuxt.js is a full-stack framework for JavaScript and TypeScript web applications. This guide covers setting up client-side Crash Reporting for an existing Nuxt.js application using the Raygun4JS provider.

In order to include Raygun4JS on each page in your application, we'll need to update the nuxt.config.js file, so it will add the Raygun setup into the <head/> of the rendered document.

Open your nuxt.config.js file, in the root of your project. Add a script section, and a __dangerouslyDisableSanitizersByTagID section inside the head object; like in the example below.

 head: {

    script: [
        hid: 'raygun',
        innerHTML: `
          h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
        type: 'text/javascript'
        hid: 'raygunConfig',
        innerHTML: `
          rg4js('apiKey', 'YOUR-RAYGUN-API-KEY');
          rg4js('enableCrashReporting', true);
          rg4js('enablePulse', true);
        type: 'text/javascript'
    __dangerouslyDisableSanitizersByTagID: {
      raygun: ['innerHTML'],
      raygunConfig: ['innerHTML']

  //Your other head config

Now, replace 'YOUR-RAYGUN-API-KEY' with your Raygun API key (available under "Application Settings" in your Raygun Account).

You can now track and fix any errors once you deploy your app.

It's necessary to use __dangerouslyDisableSanitizersByTagID to create an <script> tag with Nuxt.js. The primary risk from __dangerouslyDisableSanitizersByTagID occurs when including untrusted data in HTML. All of the provided examples are either static strings, or interpolate data directly from the process's environment variables. As such, there is no risk of these issues when using the examples as provided.