Realtime Avatar Stack

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

Usage

The RealtimeAvatarStack component renders stacked avatars which are connected to Supabase Realtime. It uses the Presence feature of Supabase Realtime. You can use this to show currently online users in a chatroom, game session or collaborative app.

<script setup lang="ts">
// Assumes you have Header component created
import Header from '@/components/Header.vue'
import RealtimeAvatarStack from '@/components/RealtimeAvatarStack.vue'
</script>
 
<template>
  <Header class="flex items-center justify-between">
    <h1>Lumon Industries</h1>
    <RealtimeAvatarStack roomName="break_room" />
  </Header>
</template>

Props

Further reading

• Realtime Presence
• Realtime authorization