Nuxt.js installation | ReactifySDK documentation

ReactifySDK · Nuxt

ReactifySDK is browser-only. Use a *.client.ts plugin so SSR never touches the custom element, and set apiKey before reactify.js for in-page "React To This" popups. Without NUXT_PUBLIC_REACTIFY_API_KEY, the thread still loads but CTAs open the hosted record page.

1. Env + runtime config

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      reactifyApiKey: process.env.NUXT_PUBLIC_REACTIFY_API_KEY || "",
    },
  },
});

.env

NUXT_PUBLIC_REACTIFY_API_KEY=rsk_live_your_publishable_key

2. Client plugin

plugins/reactify.client.ts

// plugins/reactify.client.ts
export default defineNuxtPlugin(() => {
  if (import.meta.server) return;

  const APP_BASE = "https://api.reactionsaas.com";
  const SRC = "https://reactify-cdn.s3.us-east-2.amazonaws.com/reactify.js?v=1.1.34";
  const apiKey = String(useRuntimeConfig().public.reactifyApiKey || "").trim();

  // Required for in-page React To This / Stitch (same as WordPress). Without it, CTAs open hosted /reactify/record.
  if (apiKey) {
    const cfg = { base: APP_BASE, apiKey };
    (window as any).reactifyWprtEmbed = cfg;
    (window as any).reactifyShopifyEmbed = cfg;
    (window as any).REACTIFY_EMBED_BASE = APP_BASE;
  }

  if (document.querySelector(`script[src="${SRC}"]`)) return;
  const s = document.createElement("script");
  s.src = SRC;
  s.async = true;
  document.body.appendChild(s);
});

3. Page embed

pages/thread.vue

<!-- pages/thread.vue -->
<template>
  <ClientOnly>
    <reactify-thread
      thread="YOUR_THREAD_ID"
      data-base="https://api.reactionsaas.com"
    />
  </ClientOnly>
</template>

← Vue PHP →