Skip to main content

​
Overview

The useMatchContext composable provides a shared reactive reference to the current match context. It enables components across the application to access information about the currently active match, including its ID, display text, and associated tournament.

​
Usage

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

const matchContext = useMatchContext();

// Access match information
const matchId = matchContext.value?.id;
const displayText = matchContext.value?.displayText;
const tournament = matchContext.value?.tournament;

​
Return Value

The composable returns a reactive reference with the following structure:
​
matchContext
Ref<MatchContext | null>
A reactive reference to the current match context. Will be null when no match is active.

​
Setting the Match Context

Since the return value is a reactive reference, you can update it from any component: 
const matchContext = useMatchContext();

// Set the match context
matchContext.value = {
  id: 'match-123',
  displayText: 'Team Alpha vs Team Beta',
  tournament: {
    id: 'tournament-456',
    name: 'Summer Championship 2024'
  }
};

// Clear the match context
matchContext.value = null;

​
Use Cases

Navigation Context

Display current match information in navigation bars or breadcrumbs.

Match-Specific Actions

Enable or disable features based on whether a match is currently active.

Tournament Integration

Link match pages back to their parent tournament when applicable.

Shared State

Share match context between unrelated components without prop drilling.

​
Example: Match Header Component

<template>
  <header v-if="matchContext">
    <div class="match-info">
      <h1>{{ matchContext.displayText }}</h1>
      <span class="match-id">Match ID: {{ matchContext.id }}</span>
    </div>
    
    <div v-if="matchContext.tournament" class="tournament-info">
      <router-link :to="`/tournaments/${matchContext.tournament.id}`">
        {{ matchContext.tournament.name }}
      </router-link>
    </div>
  </header>
</template>

<script setup lang="ts">
const matchContext = useMatchContext();
</script>

​
Example: Conditional Rendering

<template>
  <div>
    <MatchDetails v-if="hasActiveMatch" />
    <EmptyState v-else message="No match selected" />
  </div>
</template>

<script setup lang="ts">
const matchContext = useMatchContext();
const hasActiveMatch = computed(() => matchContext.value !== null);
</script>

​
Pattern: Composition with Other Composables

function useMatchActions() {
  const matchContext = useMatchContext();
  const router = useRouter();
  
  const navigateToTournament = () => {
    if (matchContext.value?.tournament) {
      router.push(`/tournaments/${matchContext.value.tournament.id}`);
    }
  };
  
  const canNavigateToTournament = computed(
    () => !!matchContext.value?.tournament
  );
  
  return {
    navigateToTournament,
    canNavigateToTournament
  };
}

​
Notes

This composable uses a module-level ref, meaning the match context is shared across all components that use it. Changes in one component will be reflected in all others.
The match context should be set when navigating to match-specific pages and cleared when navigating away to prevent stale data.

Build docs developers (and LLMs) love

Get started for freeTalk to us