VUE LIVE CAPABILITIES
Vue Live Streaming Features
Go live
- Host and audience roles
- Room lifecycle management
Bring people together
- Live video playback
- Audience participation
Make it yours
- Flexible application layout
- Platform-specific building blocks
Explore Vue Live Streaming Components
Connect the host view, audience view, and live-room list to your application navigation.
Give creators a place to begin
Add the Vue host preparation screen so creators can preview the camera before broadcasting. Connect the screen to your authenticated host account.
<script setup>
import { StreamMixer, LiveScenePanel } from "tuikit-atomicx-vue3";
</script>
<template>
<LiveScenePanel />
<StreamMixer />
</template>Make watching part of your app
Open the Vue audience view with the selected live room. Connect room entry and exit to your app’s navigation.
<script setup>
import { LiveCoreView, BarrageList, BarrageInput }
from "tuikit-atomicx-vue3";
</script>
<template>
<LiveCoreView />
<BarrageList />
<BarrageInput />
</template>CUSTOMIZATION
Customize Your Vue Live UI Kit
Arrange video, audience interactions, and navigation around the live experience in your Vue app.
GET STARTED
Add Live Streaming to Your Vue App
- 01
- 02
- 03
npm install tuikit-atomicx-vue3 \
@tencentcloud/uikit-base-component-vue3import { useLoginState } from 'tuikit-atomicx-vue3';
const { login } = useLoginState();
await login({ sdkAppId: SDKAppID, userId: userID, userSig });Vue Live Streaming UI Kit FAQs
What can I build with the Vue Live UI Kit?
The Vue Live Streaming UI Kit includes host, audience, and room-list interfaces. Connect these TUILiveKit components to your user accounts and Vue navigation to create a complete viewing flow.
How does this UI Kit fit with the SDK?
How do I connect a Vue live viewer to a broadcast?
How do I authenticate users of the Vue Live Streaming UI Kit?
Is the Vue Live Streaming UI Kit free to use?
How do I integrate Vue Live Streaming UI Kit with Vue?
How do I test Vue Live Streaming UI Kit before releasing my app?
How do I customize the interface for Vue Live Streaming UI Kit?
Use useLiveListState from tuikit-atomicx-vue3 to configure the host layout before broadcasting. For example, updateLiveInfo({ layoutTemplate: 200 }) selects the landscape layout; template 600 selects the portrait dynamic grid. Streaming direction must be chosen before going live and cannot be switched during the session. Keep the preview and host controls aligned with the selected template instead of changing only the CSS aspect ratio.