Run Participants and Collaboration in Vue

Build participant controls and shared activities with mediasfu-vue@1.1.1: waiting and requests, participant authority, roles and permissions, messages, polls, breakouts, whiteboard, and recording.

Complete the Vue room lifecycle first. Keep room authority and account credentials on your backend.

Start with the supplied Vue room

ModernMediasfuGeneric contains the room's participant and collaboration workspaces. Use it for the first release so every workspace reads the same participant, role, socket, media, and reconnect state.

For a custom navigation shell, the root package exposes workspace launchers:

<script setup lang="ts">
import { ref } from 'vue';
import {
  launchMessages,
  launchParticipants,
  launchPoll,
} from 'mediasfu-vue';

const participantsVisible = ref(false);
const messagesVisible = ref(false);
const pollsVisible = ref(false);

function openParticipants() {
  launchParticipants({
    isParticipantsModalVisible: participantsVisible.value,
    updateIsParticipantsModalVisible: (value) => participantsVisible.value = value,
  });
}

function openMessages() {
  launchMessages({
    isMessagesModalVisible: messagesVisible.value,
    updateIsMessagesModalVisible: (value) => messagesVisible.value = value,
  });
}

function openPolls() {
  launchPoll({
    isPollModalVisible: pollsVisible.value,
    updateIsPollModalVisible: (value) => pollsVisible.value = value,
  });
}
</script>

<template>
  <button @click="openParticipants">People</button>
  <button @click="openMessages">Messages</button>
  <button @click="openPolls">Polls</button>
</template>

The same pattern opens waiting, requests, co-host, panelist, permission, breakout, whiteboard, and recording workspaces. Opening a modal is not proof that an action succeeded; wait for current room state.

Participant authority

Use ParticipantsModal, WaitingModal, RequestsModal, and CoHostModal for the standard people workflows. Panelist and permission composables expose updatePanelists, addPanelist, removePanelist, updateParticipantPermission, and updatePermissionConfig from the package root.

Only show an authority action when the current room role permits it. Confirm a change from current room state, not from a local array or closed dialog.

Action	Observable success	Recovery
Admit or reject	The waiting entry leaves the list and the person joins or receives rejection.	Keep the entry pending until the room changes.
Approve or deny request	The request closes and the affected participant receives the result.	Restore the current request after connection or authority failure.
Mute, restrict, or remove	Remaining clients and the affected participant receive the new state.	Never hide a participant locally to simulate success.
Assign co-host or panelist	The target's role and available controls change.	Keep the previous role if no room update arrives.
Change permission	The target control follows the new individual or room policy.	Restore only the failed setting.

Ask for confirmation before removal, ending someone else's media, or applying a broad permission change.

Messages and polls

Use MessagesModal for room and direct messages. Keep the intended recipient visible, preserve unsent drafts according to your privacy policy, and show a message as sent only after current room message state includes it.

Use PollModal for create, vote, results, and end actions. Disable repeated submission while an action is pending. A reconnect must reload the current poll instead of creating or ending it again.

Breakouts and whiteboard

Use BreakoutRoomsModal to review assignments before starting. Handle unassigned participants, observe each destination, and stop the breakout before clearing local assignment drafts. Reload current breakout state after reconnect.

Use ConfigureWhiteboardModal to configure and start the shared board. Confirm that a second participant sees changes. Stop the room whiteboard before clearing app-owned drawing tools or temporary exports.

Recording

Use RecordingModal and the public recording composables. Explain what will be captured, collect the consent your product requires, call startRecording with current room options, and show the active state only after the room confirms it. Call stopRecording, wait for the stopped state, and apply your backend's retention, access, and deletion policy.

Reconnect and cleanup

While disconnected, disable authority and collaboration controls. After reconnect, wait for current participant, poll, breakout, whiteboard, and recording state. Never replay an interrupted action automatically.

On leave, removal, or meeting end, close package workspaces and clear app-owned participant selections, pending actions, drafts, timers, and temporary exports. Remove app listeners and stop app-owned media. Keep participant leave, participant removal, and host-ended meeting messages distinct.

Release checklist

• Test host, co-host or panelist, and participant views separately.
• Admit, reject, approve, deny, mute, remove, and reassign using two browsers.
• Send room and direct messages to the intended recipients.
• Create, vote, and end a poll without duplicate submission.
• Start and stop breakouts; confirm every participant's destination.
• Start, use, and stop the whiteboard for two participants.
• Start and stop recording with consent and retention behavior visible.
• Disconnect during each pending action and confirm it is not replayed.
• Verify workspaces, drafts, listeners, and authority clear after exit.

Build and test your Vue application, then run this checklist in a real multi-user room before release.