<template>
  <UIKitProvider language="zh-CN">
    <div class="container">
      <header class="header">
        <h1 class="title">Online Live Streaming</h1>
      </header>
      <main class="main">
        <LiveList @live-room-click="handleLiveRoomClick" />
      </main>
    </div>
  </UIKitProvider>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';
import { LiveList, type LiveInfo, useLoginState } from 'tuikit-atomicx-vue3';
import { UIKitProvider } from '@tencentcloud/uikit-base-component-vue3';

const { login } = useLoginState();

async function initLogin() {
  try {
    await login({
      sdkAppId: 0,        // SDKAppID, see Step 1 to obtain
      userId: '',         // UserID, see Step 1 to obtain
      userSig: '',        // userSig, see Step 1 to obtain
    });
  } catch (error) {
    console.error('login error:', error);
  }
}

onMounted(async () => {
  await initLogin();
});
</script>

<style>:global(*),:global(::after),:global(::before){box-sizing:border-box;margin:0}.container{display:flex;flex-direction:column;height:100vh;width:100vw;background:var(--bg-color-default)}.header{display:flex;align-items:center;flex-shrink:0}.title{margin:0;font-size:24px;font-weight:600;color:var(--text-color-primary);letter-spacing:-.5px}.main{flex:1;padding:24px;overflow-y:auto;min-height:0}</style>

npm run dev

// live-list.vue can be incrementally added to your code
<template>
  <UIKitProvider>
     // .....abbreviated part see quick integration procedure 3 part
     <LiveList @live-room-click="handleLiveRoomClick" />
  </UIKitProvider>
</template>

<script setup lang="ts">
import { useRouter, useRoute } from 'vue-router';

const router = useRouter();
const route = useRoute();

function handleLiveRoomClick(liveInfo: LiveInfo) {
  if (liveInfo?.liveId) {
    router.push({ path: '/live-player', query: { ...route.query, liveId: liveInfo.liveId } });
  }
}

<script>

// src/router/index.ts
import { createRouter, createWebHistory } from 'vue-router';

const routes = [
  {
    // Route jumping to the viewing page
    path: '/live-player',
    component: () => import('../views/live-player.vue'),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
export default router;

// src/main.ts
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');