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_hereOption 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
.clientsuffix 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
