ContextQMD
Back to Supabase

Realtime Chat

apps/ui-library/content/docs/vue/realtime-chat.mdx

1.26.083.0 KB
Original Source
<DualRealtimeChat />

Installation

<BlockItem name="realtime-chat-vue" description="Renders a real-time chat interface for users in a shared room." />

Folder structure

This block assumes that you have already installed a Supabase client for Vue from the previous step.

<RegistryBlock itemName="realtime-chat-vue" />

Introduction

The Realtime Chat component provides a complete chat interface that enables users to exchange messages in real-time within a shared room.

Usage

Basic usage

html
<script setup lang="ts">
  import RealtimeChat from '@/components/realtime-chat.vue'
</script>

<template>
  <RealtimeChat roomName="my-chat-room" username="john_doe" />
</template>

With initial messages

html
<script setup lang="ts">
  import RealtimeChat from '@/components/realtime-chat.vue'
  import { useMessagesQuery } from '@/composables/use-messages-query'

  const { data } = useMessagesQuery()
</script>

<template>
  <RealtimeChat roomName="my-chat-room" username="john_doe" :messages="data ?? []" />
</template>

Storing messages

html
<script setup lang="ts">
  import RealtimeChat from '@/components/realtime-chat.vue'
  import { useMessagesQuery } from '@/composables/use-messages-query'
  import { storeMessages } from '@/lib/store-messages'
  import type { ChatMessage } from '@/types'

  const { data } = useMessagesQuery()

  // Callback function for new messages
  const handleMessage = async (messages: ChatMessage[]) => {
    await storeMessages(messages)
  }
</script>

<template>
  <RealtimeChat
    roomName="my-chat-room"
    username="john_doe"
    :messages="data ?? []"
    :onMessage="handleMessage"
  />
</template>

Features

  • Real-time message synchronization
  • Message persistence support with onMessage and messages props
  • Customizable message appearance
  • Automatic scroll-to-bottom on new messages
  • Room-based isolation for scoped conversations
  • Low-latency updates using Supabase Realtime

Props

PropTypeDescription
roomNamestringUnique identifier for the shared chat room.
usernamestringName of the current user; used to identify message senders.
onMessage?(messages: ChatMessage[]) => voidOptional callback to handle messages, useful for persistence.
messages?ChatMessage[]Optional initial messages to display in the chat.

ChatMessage type

typescript
interface ChatMessage {
  id: string
  content: string
  user: {
    name: string
  }
  createdAt: string
}

Further reading