Realtime Chat

Installation

Set up the Supabase client

This block requires a Supabase client for Nuxt.js. 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 Nuxt.js 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.

How it works under the hood

This chat component uses Supabase Realtime Broadcast to send and receive messages between connected clients.

Messages sent through Broadcast are:

• delivered in real time to other connected clients
• not stored unless you handle persistence yourself
• not guaranteed to arrive if the client disconnects
• scoped to a specific roomName, which corresponds to a broadcast channel

This design keeps latency extremely low, but it means you should use the onMessage callback if you want to store messages permanently or show chat history on page load.

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

ChatMessage type

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

Further reading

• Realtime Broadcast
• Realtime authorization