Realtime Avatar Stack

Installation

<BlockItem name="realtime-avatar-stack-nuxtjs" description="Renders a stack of avatars which are connected via Supabase Realtime" />

Folder structure

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

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