Nuxt.js installation (ReactionSDK)

// nuxt.config.ts
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      reactionApiKey: process.env.NUXT_PUBLIC_REACTION_API_KEY || "",
      reactionAccountId: process.env.NUXT_PUBLIC_REACTION_ACCOUNT_ID || "",
    },
  },
});

// plugins/reaction-sdk.client.ts
export default defineNuxtPlugin(() => {
  if (import.meta.server) return;
  const src = "https://reactify-cdn.s3.us-east-2.amazonaws.com/sdk.js?v=2.0.8";
  if (document.querySelector(`script[src="${src}"]`)) return;

  const config = useRuntimeConfig();
  const s = document.createElement("script");
  s.src = src;
  s.async = true;
  s.onload = () => {
    const apiKey = config.public.reactionApiKey as string | undefined;
    const accountId = config.public.reactionAccountId as string | undefined;
    if (!apiKey?.trim()) return;
    (window as any).Reactify?.init?.({
      apiKey,
      accountId,
      baseUrl: "https://api.reactionsaas.com",
      mode: "production",
      allowedOrigins: [window.location.origin],
    });
  };
  document.body.appendChild(s);
});

<!-- components/ReactionVideo.vue — client-only custom element -->
<template>
  <reaction-video
    :src="src"
    overlays="tap,poll,slider,rating"
    poll-question="Which style do you prefer?"
    cta-text="Buy Now"
    overlay-position="bottom-center"
    interaction-type="tap"
  />
</template>

<script setup lang="ts">
defineProps<{ src: string }>();
</script>

<!-- pages/index.vue -->
<template>
  <ClientOnly>
    <ReactionVideo src="https://yourcdn.com/video.mp4" />
  </ClientOnly>
</template>