Vue 3 UI Kit

@rtcstack/ui-vue provides a drop-in <VideoConference> component and composables for custom Vue 3 UIs.

Installation

pnpm add @rtcstack/ui-vue @rtcstack/sdk livekit-client

Drop-in Usage

<script setup lang="ts">
import { createCall } from '@rtcstack/sdk'
import { VideoConference } from '@rtcstack/ui-vue'
import '@rtcstack/ui-vue/styles.css'

const call = createCall({ token, url })
await call.connect()
</script>

<template>
  <VideoConference :call="call" @leave="call.disconnect()" />
</template>

Props

Prop	Type	Description
call	Call	A Call instance from createCall()
theme	'dark' | 'light'	Color theme (default: 'dark')
showChat	boolean	Show chat panel initially (default: false)

Events

Event	Description
@leave	Emitted when the user clicks Leave

Composables

All composables must be used inside a component that is a descendant of <VideoConference> or a component that calls provide(CALL_KEY, call).

useCall()

import { useCall } from '@rtcstack/ui-vue'
const call = useCall()  // Call instance

useConnectionState()

const state = useConnectionState()  // Ref<ConnectionState>

useParticipants()

const participants = useParticipants()  // Ref<Participant[]>

useLocalParticipant()

const local = useLocalParticipant()  // Ref<Participant | null>

useActiveSpeakers()

const speakers = useActiveSpeakers()  // Ref<Participant[]>

useMessages()

const messages = useMessages()  // Ref<Message[]>

useDevices()

const devices = useDevices()
// Ref<{ audioinput, audiooutput, videoinput: MediaDeviceInfo[] }>

Building a Custom UI

<script setup lang="ts">
import { provide } from 'vue'
import { CALL_KEY, useParticipants, useMediaControls } from '@rtcstack/ui-vue'

const props = defineProps<{ call: Call }>()
provide(CALL_KEY, props.call)
</script>

<template>
  <MyGrid />
  <MyControls />
</template>

<!-- MyGrid.vue -->
<script setup lang="ts">
import { useParticipants } from '@rtcstack/ui-vue'
const participants = useParticipants()
</script>

<template>
  <div class="grid">
    <div v-for="p in participants" :key="p.id">{{ p.name }}</div>
  </div>
</template>

Atomic Components

Component	Description
<VideoConference>	Full drop-in conference
<VideoGrid>	Participant video grid
<ControlBar>	Mic/camera/screen/leave controls
<ChatPanel>	Scrolling chat with input
<ParticipantVideo>	Single participant tile

Theming

The Vue kit uses the same CSS custom properties as the React kit. Import the shared stylesheet and override tokens:

:root {
  --rtc-accent: #your-brand-color;
}

See Theming for the full token list.