Nuxt 3

npm install @swake/web-swake-sdk
# or
yarn add @swake/web-swake-sdk
# or
pnpm add @swake/web-swake-sdk

import Swake from '@swake/web';
import '@swake/web/ui';

export default defineNuxtPlugin(() => {
  const config = useRuntimeConfig();

  Swake.init({
    apiKey: config.public.swakeApiKey,
    appVersion: config.public.appVersion || '1.0.0',
    surveys: {
      enabled: true,
      autoShow: true,
      delay: 3000,
      cooldown: 86_400_000,
    },
    breadcrumbs: {
      captureNavigation: true,
      captureNetwork: true,
      captureConsole: true,
      captureClicks: true,
    },
    trigger: { position: 'bottom-right' },
  });

  return {
    provide: { swake: Swake },
  };
});

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      swakeApiKey: process.env.NUXT_PUBLIC_SWAKE_API_KEY || '',
      appVersion: process.env.NUXT_PUBLIC_APP_VERSION || '1.0.0',
    },
  },
});

NUXT_PUBLIC_SWAKE_API_KEY=ep_live_your_api_key
NUXT_PUBLIC_APP_VERSION=1.0.0

Swake.init({
  apiKey: 'ep_live_your_api_key',        // required
  baseUrl: 'https://api.swake.io',       // optional — override for self-hosted or a proxy
  debug: false,                          // verbose console logs
  appVersion: '1.0.0',                   // shown per submission in portal
  autoCapture: {
    browserInfo: true,                   // attach browser/OS info to submissions
  },
  surveys: {
    enabled: true,                       // fetch & show eligible surveys
    autoShow: true,                      // auto-show after identify()
    delay: 3000,                         // ms before auto-show
    cooldown: 86_400_000,                // ms between surveys (default: 24h)
  },
  breadcrumbs: {
    enabled: true,                       // attach breadcrumb trail
    maxEntries: 50,                      // ring buffer size (max 100)
    captureNavigation: true,             // pushState / popstate
    captureNetwork: true,                // fetch() and XMLHttpRequest
    captureConsole: true,                // console.warn / console.error
    captureClicks: true,                 // element click events
  },
  trigger: {
    position: 'bottom-right',            // 'bottom-left' | 'top-right' | 'top-left'
    icon: 'chat',                        // 'feedback' | 'bug' | 'idea'
    label: 'Feedback',
    hidden: false,
    zIndex: 999999,
    style: {
      backgroundColor: '#059669',
      size: 56,
      borderRadius: 28,
      shadow: true,
    },
  },
  theme: { /* see Theme Customization section */ },
  onLimitReachedMode: 'default_ui',      // 'silent' | 'callback_only'
  onLimitReached: (event) => {
    console.warn(event.limitKey, event.message);
  },
});

import type Swake from '@swake/web';

export function useSwake() {
  const { $swake } = useNuxtApp() as { $swake: typeof Swake };
  const userId = useState<string | null>('swake-user', () => null);
  const unreadCount = useState<number>('swake-unread', () => 0);
  let pollTimer: ReturnType<typeof setInterval> | null = null;

  async function identify(uid: string, email?: string, name?: string) {
    await $swake.identify({ userId: uid, email, name });
    userId.value = uid;
    startPolling();
  }

  function logout() {
    $swake.clearIdentity();
    userId.value = null;
    unreadCount.value = 0;
    stopPolling();
  }

  async function refreshUnread() {
    if (!userId.value) return;
    try {
      unreadCount.value = await $swake.getUnreadCount();
    } catch { /* non-fatal */ }
  }

  function startPolling() {
    stopPolling();
    void refreshUnread();
    pollTimer = setInterval(refreshUnread, 60_000);
  }

  function stopPolling() {
    if (pollTimer) { clearInterval(pollTimer); pollTimer = null; }
  }

  return {
    swake: $swake,
    userId: readonly(userId),
    unreadCount: readonly(unreadCount),
    identify,
    logout,
    refreshUnread,
  };
}

<script setup lang="ts">
const { userId, unreadCount, identify, logout } = useSwake();
</script>

<template>
  <header>
    <template v-if="userId">
      <span>Notifications: {{ unreadCount }}</span>
      <button @click="logout">Log out</button>
    </template>
    <button v-else @click="identify('user_123', 'user@example.com', 'Jane')">
      Log in
    </button>
  </header>
</template>

export function useSwakeAuth() {
  const { identify, logout } = useSwake();
  const { data: session } = useAuth(); // your auth composable

  watch(
    () => session.value,
    (session) => {
      if (session?.user) {
        identify(session.user.id, session.user.email, session.user.name);
      } else {
        logout();
      }
    },
    { immediate: true },
  );
}

const { $swake } = useNuxtApp();

await $swake.identify({
  userId: 'user_123',         // required — your app's user ID
  email: 'jane@example.com',  // optional
  name: 'Jane Smith',         // optional
  metadata: {                 // optional — arbitrary key-value pairs
    plan: 'pro',
    company: 'Acme Corp',
  },
});

$swake.clearIdentity();

const { $swake } = useNuxtApp();

// Default form
$swake.showFeedbackForm();

// With options
$swake.showFeedbackForm({
  defaultType: 'feature',           // pre-select type: 'bug' | 'feature' | 'question'
  showTypeSelector: true,           // show/hide type toggle (default: true)
  title: "What's on your mind?",    // header text
  placeholder: 'Tell us more...',   // textarea placeholder
  theme: { primaryColor: '#8B5CF6' }, // per-call theme override
});

<script setup lang="ts">
const { $swake } = useNuxtApp();
</script>

<template>
  <button @click="$swake.showFeedbackForm({ defaultType: 'bug' })">
    Report a Bug
  </button>
</template>

<!-- In your plugin, hide the trigger:
  trigger: { hidden: true }
-->

const { $swake } = useNuxtApp();

const submission = await $swake.submitFeedback({
  type: 'bug',                                      // 'bug' | 'feature' | 'question'
  title: 'Search returns no results',                // required
  description: 'Reproducible on Safari + macOS 14.', // optional
  attachments: [                                      // optional — File objects
    { file: screenshotFile },
  ],
});

console.log('Created:', submission.id);

const { $swake } = useNuxtApp();

// Open the built-in history panel
$swake.showFeedbackHistory();

// Lightweight list (id, title, status, type, createdAt)
const { submissions, hasMore, cursor } = await $swake.getHistory({ limit: 20 });

// Full submission detail with comments + attachments
const submission = await $swake.getSubmission('submission_id');

// Paginated submission list with more fields
const result = await $swake.listSubmissions({ limit: 10 });

Swake.init({
  apiKey: 'ep_live_...',
  trigger: {
    position: 'bottom-right',     // 'bottom-left' | 'top-right' | 'top-left'
    icon: 'chat',                 // 'feedback' | 'bug' | 'idea'
    label: 'Feedback',
    hidden: false,
    zIndex: 999999,
    style: {
      backgroundColor: '#059669',
      size: 56,
      borderRadius: 28,
      shadow: true,
    },
  },
});

const { $swake } = useNuxtApp();

// Hide the FAB (e.g. during onboarding)
$swake.setTriggerVisible(false);

// Show it again
$swake.setTriggerVisible(true);

// Programmatic open / close
$swake.open();    // opens the feedback form
$swake.close();   // closes any open widget

const { $swake } = useNuxtApp();

// Re-check eligibility and show the first match
await $swake.checkSurveys();

// Show a specific survey by ID (ignores cooldown)
await $swake.showSurvey('survey_abc123');

Swake.onSurveyShown((event) => {
  console.log('Survey shown:', event.id, event.type);
});

Swake.onSurveyCompleted((event) => {
  console.log('Completed:', event.survey.id, 'answers:', event.response.answers);
});

Swake.onSurveyDismissed((event) => {
  console.log('Dismissed:', event.id);
});

const { $swake } = useNuxtApp();

// Fetch board items
const { items, hasMore } = await $swake.getBoardItems('public-roadmap', {
  sort: 'votes',      // 'votes' | 'recent'
  status: 'open',     // 'open' | 'in_progress' | 'resolved' | 'closed'
  page: 1,
});

// Cast a vote (requires identify)
const { status, voteCount } = await $swake.vote('public-roadmap', 'item_id');

// Remove a vote
const result = await $swake.removeVote('public-roadmap', 'item_id');

const { $swake } = useNuxtApp();

// Get unread count
const count = await $swake.getUnreadCount();

// List notifications
const { notifications, pagination } = await $swake.listNotifications({
  unreadOnly: true,
  limit: 20,
});

// Mark as read
await $swake.markNotificationRead('notification_id');

// Mark all as read
await $swake.markAllNotificationsRead();

Swake.init({
  apiKey: config.public.swakeApiKey,
  theme: {
    primaryColor: '#8B5CF6',       // buttons, active states, FAB
    successColor: '#10B981',       // success states
    dangerColor: '#EF4444',        // error states
    backgroundColor: '#FFFFFF',    // panel backgrounds
    surfaceColor: '#F8FAFC',       // cards, input backgrounds
    overlayColor: 'rgba(15,23,42,0.4)', // backdrop
    textColor: '#0F172A',          // primary text
    textSecondary: '#64748B',      // muted text
    borderColor: '#E2E8F0',        // borders, dividers
    borderRadius: 12,              // px
    fontFamily: 'Inter, sans-serif',
  },
});

$swake.showFeedbackForm({
  theme: { primaryColor: '#0EA5E9' },
});

const { $swake } = useNuxtApp();

$swake.addBreadcrumb({
  category: 'custom',
  message: 'User upgraded to Pro plan',
  data: { plan: 'pro', via: 'settings' },
});

// Read the current trail
const trail = $swake.getBreadcrumbs();

// Clear the buffer
$swake.clearBreadcrumbs();

import { offlineQueue } from '@swake/web';

// Check queue size
const pending = offlineQueue.size();

// Force a flush attempt
await offlineQueue.flush();

Fully integrate the Swake feedback SDK (feedback forms, bug reports, surveys/NPS, in-app notifications, voting boards) into this Nuxt 3 app. Treat it as additive: a Swake or network failure must NEVER break boot or any existing behavior. Never invent or fake an API that is not in the docs.

1. READ THE DOCS FIRST — they are the source of truth for the package, init/identify, the widget layer and every option. Fetch with a browser User-Agent (a plain fetch returns 403): curl -sL -A "Mozilla/5.0" "https://swake.io/docs/sdk?framework=nuxt". Confirm the Nuxt major version and whether SSR is enabled before you edit anything.
2. ASK BEFORE DECIDING ANYTHING (AskUserQuestion): (a) integration mode — DIRECT, meaning the ep_live_ key ships in the browser via runtimeConfig.public.swakeApiKey (fine for a static or SPA-only app), or PROXY, meaning the key stays server-side in a Nitro server route (recommended whenever a backend exists — see step 4); (b) the API key or proxy path, an optional baseUrl, and a voting-board slug if they want the board. Write PLACEHOLDERS ONLY into env files (and the .example alongside) — never commit a real key. ASK again before installing any package.
3. INSTALL AS A CLIENT PLUGIN — add @swake/web and create plugins/swake.client.ts. The .client suffix IS the SSR guard: Nuxt only ever runs that file in the browser, so no import.meta.client checks or onMounted wrappers are needed. Load the widgets there with await import('@swake/web/ui'). Read config from useRuntimeConfig().public and declare it in nuxt.config.ts.
4. INIT EXACTLY ONCE, IDEMPOTENTLY — keep a module-level "let initPromise: Promise<void> | null" and have every caller await the SAME promise. This is required, not stylistic: the SDK exposes no isInitialized(), every method throws "[Swake] SDK not initialized" before init(), and a second init() starts a second offline-queue flush interval without clearing the first. Swake.init() itself is synchronous. PROXY mode: pass any non-empty placeholder as apiKey, point baseUrl at a Nitro route you add at server/api/swake/[...].ts, which forwards method, path, query and body to the Swake API, and set credentials: 'include'. That backend attaches the real X-API-Key server-side, overrides any client-supplied externalUserId with the session user so identity cannot be spoofed, and must allow X-API-Key and Idempotency-Key through CORS. Set trigger: { hidden: true } if the app will open feedback from its own button instead of the floating one.
5. IDENTITY — after init resolves, call Swake.identify({ userId, email, name, metadata }) on EVERY load that has a session, not just on the login event: identity is held in memory only, so a page refresh loses it. userId must be your stable internal id, and every metadata value must be a string. On logout call Swake.clearIdentity() inside a try/catch — it throws if init never ran. Watch your user composable (useUserSession, useSupabaseUser, or whatever is present) with { immediate: true } so a session restored on load identifies too.
6. POLISH — drive Swake.setTheme() from the app's light/dark toggle (widgets otherwise keep the theme captured at init); gate init/identify by route so an auto-shown survey can never land on login, signup, or onboarding; add Swake.addBreadcrumb() at meaningful domain events so bug reports arrive with context.
7. VERIFY & REPORT — funnel every SDK call through one wrapper with try/catch, then prove it end to end: the trigger opens the form, a real submission appears in the Swake dashboard, and no survey shows on an auth or onboarding route. Report the files you changed, any manual steps left for me, and every assumption you made. Confirm it against a real SSR build (nuxi build && nuxi preview), not just dev.