Vue

The @saytv/chat-vue package provides a Vue 3 component and composable for integrating the chat widget.

Installation

npm install @saytv/chat-vue

Peer dependency: Vue 3.2+.

Basic Usage

<script setup lang="ts">
import { SayTVChat } from '@saytv/chat-vue';
</script>

<template>
  <SayTVChat
    app-id="your-app-id"
    theme="light"
    :height="700"
    width="100%"
  />
</template>

With External Auth

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { SayTVChat } from '@saytv/chat-vue';

const token = ref<string>();

onMounted(async () => {
  token.value = await fetchUserToken();
});
</script>

<template>
  <SayTVChat
    app-id="your-app-id"
    :auth-token="token"
    :built-in-auth="false"
    theme="light"
    :height="700"
    width="100%"
  />
</template>

Props

Prop	Type	Default	Description
appId	string	-	App identifier (resolves API URL automatically)
env	'production' | 'staging'	'production'	API environment
apiUrl	string	-	Direct API base URL (overrides appId/env)
authToken	string	-	JWT access token for external auth
builtInAuth	boolean	true	Show built-in login/register UI
fanzone	boolean	false	Enable the Fanzone feature
height	number	850	Widget height in pixels
width	string	'450px'	Widget width (any CSS value)
mode	'page-chat'	-	Enables page chat mode
pageId	string	window.location.href	Unique identifier for page chat
pageName	string	document.title	Display name for page chat
customTabUrl	string	-	URL loaded in a custom tab iframe
customTabLabel	string	-	Label shown on the custom tab
customTabIcon	string	-	Icon name for the custom tab
hideHeader	boolean	false	Hide the top title bar on every page
hideFooter	boolean	false	Hide the bottom tab-bar navigation
hideAvatar	boolean	false	Hide every entry point to the built-in avatar picker. Use when your app owns the user's avatar
hideGuestNotice	boolean	false	Hide the read-only bar shown to guests in place of the composer
hideBadges	boolean	false	Hide the Badges card on the profile screen and its page
hideLeaderboard	boolean	false	Hide the Leaderboard card on the profile screen and its page
hideEmojiStore	boolean	false	Hide the Emojis card and the emoji store page. The emoji picker in the composer is unaffected
hideAvatarStore	boolean	false	Hide the Avatars card and the avatar store page
hideUserProfiles	boolean	false	Stop message authors and member-list names linking to that person's profile. Names and avatars still show; they stop being tappable. The signed-in user's own profile is unaffected
avatarUrl	string	-	Image URL applied as the signed-in user's avatar
theme	'light' | 'dark'	'light'	Color theme
locale	string	'en'	BCP-47 UI language; RTL auto
translations	Record<string, Record<string, string>>	-	Catalogs keyed by locale, merged over English
translationsUrl	string	-	URL of a hosted flat JSON catalog to fetch and apply for the active locale

All props are reactive - changing a prop updates the underlying <saytv-chat> element.

TIP

Use kebab-case for props in templates (app-id, auth-token, built-in-auth) and camelCase in script (appId, authToken, builtInAuth).

Events

Event	Payload	Description
@ready	CustomEvent	Widget initialized
@user-login	CustomEvent	Fired on successful login
@user-logout	CustomEvent	Fired on logout
@message-sent	CustomEvent	Fired when user sends a message
@message-received	CustomEvent	New message from another user
@navigation	CustomEvent	Page changed within widget
@episode-changed	CustomEvent	User selected an episode
@room-joined	CustomEvent	User entered a chat room
@theme-changed	CustomEvent	Theme switched
@page-chat-ready	CustomEvent	Page chat episode is created or reconnected
@error	CustomEvent	Fired on SDK errors

<template>
  <SayTVChat
    app-id="your-app-id"
    @ready="() => console.log('Widget ready')"
    @user-login="(e) => console.log('Logged in:', e.detail.user)"
    @message-sent="(e) => console.log('Sent:', e.detail.message)"
    @message-received="(e) => console.log('Received:', e.detail.message)"
    @episode-changed="(e) => console.log('Episode:', e.detail.episode)"
    @error="(e) => console.error('Error:', e.detail.error)"
  />
</template>

useSayTVChat Composable

The useSayTVChat composable provides imperative access to the widget:

<script setup lang="ts">
import { SayTVChat, useSayTVChat } from '@saytv/chat-vue';

const { chatRef, getElement, setToken, setTheme, setUsername } = useSayTVChat();
</script>

<template>
  <SayTVChat
    ref="chatRef"
    app-id="your-app-id"
    theme="light"
    :height="700"
    width="100%"
  />

  <button @click="setTheme('dark')">Dark Mode</button>
  <button @click="setToken(newToken)">Update Token</button>
</template>

Composable Return Values

Property	Type	Description
chatRef	Ref<{ element: HTMLElement | null }>	Template ref for the component
getElement()	() => HTMLElement | null	Returns the underlying <saytv-chat> element
setToken(token)	(token: string) => void	Updates the auth-token attribute
setTheme(theme)	(theme: 'light' | 'dark') => void	Switches the color theme
setUsername(name)	(name: string) => Promise<User>	Renames the signed-in user. Rejects with a 422 and errors.username when the name is taken, too short, or blocked by moderation. See Methods

Custom Theming

Pass CSS custom properties as inline styles:

<template>
  <SayTVChat
    app-id="your-app-id"
    theme="light"
    :style="{
      '--stv-color-primary': '#4f46e5',
      '--stv-color-accent': '#10b981',
      '--stv-border-radius-md': '12px',
    }"
  />
</template>

See Theming for all available CSS variables.

Localization

Set the UI language with locale and supply your own translation catalogs via :translations. Catalogs are keyed by locale and merged over the built-in English, so untranslated keys fall back to English. RTL languages lay out automatically.

<template>
  <SayTVChat
    app-id="your-app-id"
    locale="ar"
    :translations="{
      ar: {
        'auth.login.title': 'مرحبا بعودتك',
        'chat.input.placeholder': 'اكتب رسالة…',
      },
    }"
  />
</template>

Alternatively, point :translations-url at a hosted flat JSON catalog and the widget fetches and registers it for the active locale, no object needed. A failed fetch falls back to English.

<template>
  <SayTVChat
    app-id="your-app-id"
    locale="ar"
    translations-url="https://your-cdn.com/locales/ar.json"
  />
</template>

See Localization for the full guide and available keys.

TypeScript

All types are exported from the package:

import type { SayTVChatProps } from '@saytv/chat-vue';
import type { UseSayTVChatReturn } from '@saytv/chat-vue';