Vue Host Dashboard Tutorial

Build a host dashboard with mediasfu-vue@1.3.0. The supplied Vue room renders participants, requests, permissions, media, alerts, and leave behavior.

Prerequisites

• Node.js 18 to 20, Vue 3, HTTPS or localhost, and two browser profiles.
• Authenticated create/join routes and backend host policy.

Project files

package.json

{"private":true,"scripts":{"dev":"vite"},"dependencies":{"mediasfu-vue":"1.3.0","vue":"3.5.13"},"devDependencies":{"@vitejs/plugin-vue":"5.2.1","typescript":"5.9.3","vite":"5.4.19"}}

src/room-gateway.ts

import type { CreateJoinRoomResult, CreateRoomOnMediaSFUType, JoinRoomOnMediaSFUType } from 'mediasfu-vue';
async function postRoom(url: string, payload: unknown): Promise<CreateJoinRoomResult> { const response = await fetch(url, { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) throw new Error(`Room request failed (HTTP ${response.status}).`); return response.json() as Promise<CreateJoinRoomResult>; }
export const createRoom: CreateRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/create-room', payload); export const joinRoom: JoinRoomOnMediaSFUType = ({ payload }) => postRoom('/api/mediasfu/join-room', payload);

src/App.vue

<script setup lang="ts">import { MediasfuGeneric } from 'mediasfu-vue'; import 'mediasfu-vue/dist/mediasfu-vue.css'; import { createRoom, joinRoom } from './room-gateway';</script>
<template><main><h1>Host dashboard</h1><p>Open Participants and Requests to manage this room.</p><MediasfuGeneric :return-u-i="true" :connect-media-s-f-u="true" :create-media-s-f-u-room="createRoom" :join-media-s-f-u-room="joinRoom" /></main></template>

src/main.ts

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

index.html

<!doctype html><html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width,initial-scale=1" /><title>Host dashboard</title></head><body><div id="app"></div><script type="module" src="/src/main.ts"></script></body></html>

vite.config.ts

import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [vue()] });

tsconfig.json

{"compilerOptions":{"target":"ES2022","lib":["DOM","ES2022"],"strict":true,"module":"ESNext","moduleResolution":"Bundler","skipLibCheck":true,"noEmit":true},"include":["src"]}

An isolated local backend may use restricted, revocable credentials that are never committed. Before distribution, external testing, or production rooms, reusable Cloud credentials must remain on the authenticated backend.

Backend

Keep src/room-gateway.ts in this project and implement its two API routes using the complete public production room credential boundary. The backend authorizes hosts before forwarding a room request; the browser never receives a Cloud credential.

Run

npm install
npm run dev

Expected result

Create as host, join from the second profile, open Participants/Requests, and confirm allowed actions update the room for both people. Host-only controls stay unavailable to a participant.

Recovery

Disable moderation while reconnecting. Refresh participant state before retrying an action, and treat permission denial as policy rather than network failure.

Cleanup

Use Leave for local departure. Clear app-held selection state and let the backend expire temporary room authority. Leave only removes this person; to end the room for everyone, use the host end action in Leave, end, and rejoin.