Realtime Chat

Installation

Set up the Supabase client

This block requires a Supabase client for Vue. If your project already has one, reuse it and update the block's imports to match your client. Otherwise, install the client:

Configure the environment variables described in the Vue client guide before using the block.

Install the block

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

<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

<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

<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

Prop	Type	Description
`roomName`	`string`	Unique identifier for the shared chat room.
`username`	`string`	Name of the current user; used to identify message senders.
`onMessage?`	`(messages: ChatMessage[]) => void`	Optional callback to handle messages, useful for persistence.
`messages?`	`ChatMessage[]`	Optional initial messages to display in the chat.

ChatMessage type

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