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
theme	'light' | 'dark'	'light'	Color theme

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 } = 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

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.

TypeScript

All types are exported from the package:

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