Skip to main content

​
Overview

The useInvites composable provides reactive access to all pending invitations and friend requests. It aggregates data from the matchmaking store and provides computed properties for checking invite states and counts.

​
Usage

import { useInvites } from '~/composables/useInvites';

const {
  matchInvites,
  lobbyInvites,
  pendingFriends,
  hasInvites,
  totalCount
} = useInvites();

​
Return Values

The composable returns an object with the following reactive computed properties:

​
Invite Collections

​
matchInvites
ComputedRef<any[]>
Array of pending match invitations from the matchmaking store.
​
lobbyInvites
ComputedRef<any[]>
Array of pending lobby invitations from the matchmaking store.
​
pendingFriends
ComputedRef<any[]>
Array of pending friend requests that were not sent by the current user. Filtered to show only incoming friend requests and sorted alphabetically by name.

​
Status Checks

​
hasMatchInvites
ComputedRef<boolean>
Whether there are any pending match invites. Returns true if matchInvites has one or more items.
​
hasLobbyInvites
ComputedRef<boolean>
Whether there are any pending lobby invites. Returns true if lobbyInvites has one or more items.
​
hasPendingFriends
ComputedRef<boolean>
Whether there are any pending incoming friend requests. Returns true if pendingFriends has one or more items.
​
hasInvites
ComputedRef<boolean>
Whether there are any invites of any type (match, lobby, or friend requests). Returns true if any of the above categories have items.
​
hasSocialInvites
ComputedRef<boolean>
Whether there are match invites or friend requests (excludes lobby invites). Useful for social-specific notification indicators.

​
Counts

​
totalCount
ComputedRef<number>
The total number of pending invites across all categories (match + lobby + friend requests).

​
Use Cases

Notification Badges

Display count badges on navigation items or buttons to indicate pending invites.

Invite Panels

Render invite lists with conditional visibility based on invite presence.

Social Features

Manage friend requests and social interactions within the platform.

Matchmaking UI

Show pending match and lobby invitations for quick joining.

​
Example: Notification Badge

<template>
  <button class="notifications-button">
    <Bell :size="20" />
    <span v-if="hasInvites" class="badge">
      {{ totalCount }}
    </span>
  </button>
</template>

<script setup lang="ts">
import { Bell } from 'lucide-vue-next';

const { hasInvites, totalCount } = useInvites();
</script>

​
Example: Invites Panel

<template>
  <div class="invites-panel">
    <section v-if="hasMatchInvites">
      <h3>Match Invites ({{ matchInvites.length }})</h3>
      <InviteCard
        v-for="invite in matchInvites"
        :key="invite.id"
        :invite="invite"
        type="match"
      />
    </section>
    
    <section v-if="hasLobbyInvites">
      <h3>Lobby Invites ({{ lobbyInvites.length }})</h3>
      <InviteCard
        v-for="invite in lobbyInvites"
        :key="invite.id"
        :invite="invite"
        type="lobby"
      />
    </section>
    
    <section v-if="hasPendingFriends">
      <h3>Friend Requests ({{ pendingFriends.length }})</h3>
      <FriendRequestCard
        v-for="friend in pendingFriends"
        :key="friend.id"
        :friend="friend"
      />
    </section>
    
    <div v-if="!hasInvites" class="empty-state">
      <p>No pending invites</p>
    </div>
  </div>
</template>

<script setup lang="ts">
const {
  matchInvites,
  lobbyInvites,
  pendingFriends,
  hasMatchInvites,
  hasLobbyInvites,
  hasPendingFriends,
  hasInvites
} = useInvites();
</script>

​
Example: Social-Only Notifications

<template>
  <div v-if="hasSocialInvites" class="social-notification">
    <p>You have {{ socialCount }} social notification(s)</p>
    <ul>
      <li v-if="hasMatchInvites">
        {{ matchInvites.length }} match invite(s)
      </li>
      <li v-if="hasPendingFriends">
        {{ pendingFriends.length }} friend request(s)
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
const {
  matchInvites,
  pendingFriends,
  hasMatchInvites,
  hasPendingFriends,
  hasSocialInvites
} = useInvites();

const socialCount = computed(
  () => matchInvites.value.length + pendingFriends.value.length
);
</script>

​
Friend Request Filtering

The pendingFriends property automatically filters the friends list to show only:
  1. Friends with status "Pending"
  2. Friend requests where the current user is NOT the inviter (incoming requests only)
This ensures users only see friend requests they need to respond to, not requests they’ve sent. 
// Internal filtering logic
const pendingFriends = computed(() =>
  friends.value?.filter((friend: any) => {
    return (
      friend.status === "Pending" &&
      friend.invited_by_steam_id !== useAuthStore().me?.steam_id
    );
  })
);

​
Dependencies

  • useMatchmakingStore() - Provides match invites, lobby invites, and friends list
  • useAuthStore() - Provides current user information for filtering friend requests

​
Notes

All returned values are computed properties that automatically update when the underlying store data changes. No manual refresh is needed.
The pendingFriends list is automatically sorted alphabetically by name for consistent display ordering.
Use hasSocialInvites when you want to show notifications for match invites and friend requests but exclude lobby invites from the count.

Build docs developers (and LLMs) love

Get started for freeTalk to us