How to Integrate SnagRelay Widget into a Nuxt Application

Overview

Integrate SnagRelay into your Nuxt application to capture bug reports with full context. This guide covers Nuxt 3 (recommended) and Nuxt 2. The widget configuration is managed in your dashboard, so the code integration is minimal.

Prerequisites

• A SnagRelay account (sign up free)
• Your SnagRelay API key
• A Nuxt application (Nuxt 3 or Nuxt 2)

Nuxt 3 Integration (Recommended)

Option 1: Nuxt Plugin

Create a client-side plugin:

// plugins/snagrelay.client.ts
export default defineNuxtPlugin(() => {
  window.onSnagRelayLoad = function (api) {
    api.init();
  };

  const script = document.createElement('script');
  script.defer = true;
  script.src = `https://app.snagrelay.com/widget/load/${useRuntimeConfig().public.snagRelayKey}?onload=onSnagRelayLoad`;
  document.head.appendChild(script);
});

Add your config to nuxt.config.ts:

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      snagRelayKey: process.env.NUXT_PUBLIC_SNAGRELAY_KEY
    }
  }
});

Add to .env:

NUXT_PUBLIC_SNAGRELAY_KEY=your_api_key_here

Option 2: app.vue

If you prefer adding it directly in app.vue:

<!-- app.vue -->
<script setup>
onMounted(() => {
  window.onSnagRelayLoad = function (api) {
    api.init();
  };

  const script = document.createElement('script');
  script.defer = true;
  script.src = 'https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad';
  document.head.appendChild(script);
});
</script>

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

Nuxt 2 Integration

Create a Plugin

// plugins/snagrelay.client.js
export default ({ app }) => {
  if (process.client) {
    window.onSnagRelayLoad = function (api) {
      api.init();
    };

    const script = document.createElement('script');
    script.defer = true;
    script.src = 'https://app.snagrelay.com/widget/load/YOUR_API_KEY?onload=onSnagRelayLoad';
    document.head.appendChild(script);
  }
};

Register it in nuxt.config.js:

// nuxt.config.js
export default {
  plugins: [
    { src: '~/plugins/snagrelay.client.js', mode: 'client' }
  ]
};

TypeScript Types

For TypeScript support in Nuxt 3, add a type declaration:

// types/snagrelay.d.ts
interface Window {
  onSnagRelayLoad: (api: { init: () => void }) => void;
}

That's It!

The widget configuration (position, colors, button text, session replay settings, etc.) is managed in your SnagRelay dashboard. Any changes you make there will automatically apply to your widget.

Best Practices

• Use the .client suffix on your plugin file (Nuxt 3) to ensure it only runs client-side — the widget requires browser APIs
• Use runtime config to store your API key so it's available as an environment variable
• Load once — Nuxt plugins run once at initialization, so no guard needed

Next Steps

• Customize the widget in your dashboard
• Set up integrations with your issue tracker
• Configure team members and permissions

Further Reading

• SnagRelay for coding agents: how a report reaches Cursor, Claude Code or Codex
• The MCP server: the tools your agent can call
• What every report includes
• Pricing
• Start free, no credit card required