VUE ROOM CAPABILITIES
Rooms built for your application
Room lifecycle
- Create and join rooms
- Handle leave and end actions
Live conversation
- Connect participant video
- Control camera and microphone
Participant experience
- Display room members
- Reflect room state changes
Application identity
- Connect your own user IDs
- Authenticate with server-issued UserSig
Platform integration
- Vue 3 applications
- Follow native or browser permissions
Your product flow
- Connect rooms to your navigation
- Keep business data in your app
Explore the Vue meeting components
See the room experience and the code behind it.
A place for everyone
Mount the meeting view with the Vue Video Conferencing UI Kit. Your application supplies authenticated users and a room ID.
<script setup lang="ts">
import { UIKitProvider } from "@tencentcloud/uikit-base-component-vue3";
import { ConferenceMainView } from "@tencentcloud/roomkit-web-vue3";
</script>
<template>
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
</template>Connect your application identity
Sign in with your application ID, user ID, and a server-issued UserSig. Enter the room after login succeeds.
import { conference } from '@tencentcloud/roomkit-web-vue3';
await conference.login({ sdkAppId: SDKAppID, userId, userSig });
await conference.createAndJoinRoom({
roomId, options: { roomName: 'Studio review' },
});CUSTOMIZATION
Make the room feel like your product
GET STARTED
Bring your first room to life
- 01
- 02
- 03
npm install @tencentcloud/roomkit-web-vue3@5 tuikit-atomicx-vue3 @tencentcloud/uikit-base-component-vue3 @tencentcloud/universal-api<script setup lang="ts">
import { UIKitProvider } from "@tencentcloud/uikit-base-component-vue3";
import { ConferenceMainView } from "@tencentcloud/roomkit-web-vue3";
</script>
<template>
<UIKitProvider theme="light" language="en-US">
<ConferenceMainView />
</UIKitProvider>
</template>Vue Video Conferencing UI Kit FAQs
What does the Vue Video Conferencing UI Kit include?
The Vue Video Conferencing UI Kit provides a ready-made meeting interface with room entry, video views, and participant controls. Your app supplies identity and business workflows.
How do I integrate the Vue Video Conferencing UI Kit?
How do users sign in to the Vue Video Conferencing UI Kit?
Use your SDKAppID, user ID, and a UserSig generated on your server. Keep the application secret out of browser and mobile code. Handle authentication failure before room entry.
Can I customize the meeting experience?
Adapt documented components and configuration to your product. Native UI Kit source exposes room views and toolbars. Check the platform guide for supported options.
How is Room priced?
Does this replace my course or workspace system?
Your application continues to own course content, workspace permissions, payments, and business records. The meeting component adds real-time communication to that flow.
How do I integrate Vue Video Conferencing UI Kit with Vue?
How do I test Vue Video Conferencing UI Kit before releasing my app?
How do I customize the interface for Vue Video Conferencing UI Kit?
Configure UIKitProvider in your Vue template and use conference from @tencentcloud/roomkit-web-vue3 for room options. For example, call conference.setFeatureConfig({ shareLink: yourRoomUrl }) after joining or creating the room, when its ID is available. The default share link is the current page address. Prefer these supported options; ejecting the component source moves your copy outside the package's standard upgrade path.