# Realtime Avatar Stack

Avatar stack in realtime

## Files

- `components/`
  - `avatar-stack.vue`
  - `realtime-avatar-stack.vue`
- `composables/`
  - `useCurrentUserImage.ts`
  - `useCurrentUserName.ts`
  - `useRealtimePresenceRoom.ts`

External registry dependencies: avatar, tooltip.

Full source: https://supabase.com/library/r/realtime-avatar-stack-vue.json

## 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:

Install this block:

```bash
npx shadcn-vue@latest add https://supabase.com/library/r/supabase-client-vue.json
```

Configure the environment variables described in the [Vue client guide](https://supabase.com/library/docs/vue/client.md#getting-started) before using the block.

### Install the block

Install this block:

```bash
npx shadcn-vue@latest add https://supabase.com/library/r/realtime-avatar-stack-vue.json
```

## 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.

```vue
<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

| Prop       | Type     | Default | Description                                          |
| ---------- | -------- | ------- | ---------------------------------------------------- |
| `roomName` | `string` | `null`  | The name of the Supabase Realtime room to connect to |

## Further reading

- [Realtime Presence](https://supabase.com/docs/guides/realtime/presence)
- [Realtime authorization](https://supabase.com/docs/guides/realtime/authorization)