#6

client/app/app.vue

@@ -1,13 +1,24 @@
 <template>
-  <h1>yo</h1>
-  <pre>{{ connected }}</pre>
-  <audio v-for="(s, i) in streams" :key="i" :ref="(el) => onAudioRef(el, s)" autoplay controls />
+  <PrimeProgressSpinner v-if="initializing" />
+
+  <template v-for="(s, producerId) in streams" :key="producerId">
+    <PrimeChip :label="producerId" />
+    <audio
+      :ref="(el) => onAudioRef(el as HTMLAudioElement, s)"
+      autoplay
+      controls
+      style="display: none;"
+    />
+  </template>
 </template>
 
 <script lang="ts" setup>
-const { connected, streams } = useMediasoup()
+const { initializing, connected, streams } = useMediasoup()
 
-function onAudioRef(ref: Element, stream: MediaStream) {
-  (ref as HTMLAudioElement).srcObject = stream
+function onAudioRef(ref: HTMLAudioElement, stream: MediaStream) {
+  if (!ref)
+    return
+
+  ref.srcObject = stream
 }
 </script>

client/app/assets/styles/main.scss

@@ -0,0 +1,5 @@
+html,
+body {
+  font-family: 'Inter', sans-serif;
+  font-size: 14px;
+}

client/app/components.d.ts

@@ -0,0 +1,17 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    PrimeButton: typeof import('primevue/button')['default']
+    PrimeChip: typeof import('primevue/chip')['default']
+    PrimeProgressSpinner: typeof import('primevue/progressspinner')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+  }
+}

client/app/composables/use-mediasoup.ts

@@ -184,6 +184,7 @@ export const useMediasoup = createGlobalState(() => {
   })()
 
   return {
+    initializing,
     connected,
     streams,
   }

client/nuxt.config.ts

@@ -1,7 +1,24 @@
+import Aura from '@primeuix/themes/aura'
+
 export default defineNuxtConfig({
   compatibilityDate: '2025-09-29',
   devtools: { enabled: true },
   ssr: false,
+  modules: [
+    '@nuxt/fonts',
+    '@primevue/nuxt-module',
+  ],
+  primevue: {
+    options: {
+      theme: {
+        preset: Aura,
+      },
+    },
+    components: {
+      prefix: 'Prime',
+    },
+  },
+  css: ['@/assets/styles/main.scss'],
   devServer: {
     // host: '0',
   },

client/package.json

@@ -10,9 +10,12 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@nuxt/fonts": "^0.11.4",
+    "@primeuix/themes": "^1.2.5",
     "@vueuse/core": "^13.9.0",
     "mediasoup-client": "^3.16.7",
     "nuxt": "^4.1.2",
+    "primevue": "^4.4.0",
     "socket.io-client": "^4.8.1",
     "vue": "^3.5.22",
     "vue-router": "^4.5.1"
@@ -20,9 +23,11 @@
   "packageManager": "yarn@4.10.3",
   "devDependencies": {
     "@antfu/eslint-config": "^5.4.1",
+    "@primevue/nuxt-module": "^4.4.0",
     "@tauri-apps/cli": "^2.8.4",
     "eslint": "^9.36.0",
     "eslint-plugin-format": "^1.0.2",
+    "sass-embedded": "^1.93.2",
     "typescript": "^5.9.3"
   }
 }