Skip to main content

Vue Host Dashboard Tutorial

Build a host dashboard with mediasfu-vue@1.1.1. 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.1.1","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. Vue 1.1.1 does not document a separate host-wide end action; do not label local leave as ending every participant.