ReactionSaaS
Documentation

Vue installation

ReactifySDK · Vue

Bootstrap reactifyWprtEmbed.apiKey before loading reactify.js (same gate as WordPress), then render reactify-thread. Without the key, "React To This" opens https://api.reactionsaas.com/reactify/record.

1. Boot in main.ts

main.ts
// main.ts
import { createApp } from "vue";
import App from "./App.vue";

const APP_BASE = "https://api.reactionsaas.com";
const SRC = "https://reactify-cdn.s3.us-east-2.amazonaws.com/reactify.js?v=1.1.34";

function bootstrapReactifyEmbed(apiKey: string) {
  const cfg = { base: APP_BASE, apiKey: apiKey.trim() };
  (window as any).reactifyWprtEmbed = cfg;
  (window as any).reactifyShopifyEmbed = cfg;
  (window as any).REACTIFY_EMBED_BASE = APP_BASE;
}

const apiKey = import.meta.env.VITE_REACTIFY_API_KEY ?? "";
if (apiKey) bootstrapReactifyEmbed(apiKey);

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

createApp(App).mount("#app");

2. Component

ThreadSection.vue
<!-- ThreadSection.vue -->
<template>
  <!-- Prefer a concrete thread id for beat/stitch popups -->
  <reactify-thread
    thread="YOUR_THREAD_ID"
    :data-base="appBase"
  />
</template>

<script setup lang="ts">
const appBase = "https://api.reactionsaas.com";
</script>

Nuxt?

Use the Nuxt guide (client plugin + ClientOnly). ReactionSDK overlays on Vue: ReactionSDK Vue.

← ReactNuxt →