Realtime Chat

Installation

<BlockItem name="realtime-chat-nuxtjs" 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.

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