Customization for Full-featured Integration

This document will introduce in detail how to customize the user interface of TUILiveKit by exporting the source code.
Option 1: Modify TUILiveKit Source Code Export
You can directly modify the UI source code we provide to adjust the user interface of TUILiveKit according to requirements.
Step 1: Exporting the TUILiveKit Source Code
Vue3
1. Execute the source code export script. The default copy path is ./src/components/TUILive.
  node ./node_modules/@tencentcloud/livekit-web-vue3/scripts/eject.js
2. Follow the script prompt to confirm whether to copy the TUILiveKit source code to the ./src/components/TUILive directory. If you need to customize the copy directory, enter 'y'; otherwise, enter 'n'.
﻿
﻿
﻿
3. After exporting the source code, the TUILiveKit source code will be newly added in your designated project path. At this point, you need to manually change the reference of the liveMainView component and the liveRoom object from the npm package address to the relative path address of the TUILive source code.
- import { liveMainView, liveRoom } from '@tencentcloud/livekit-web-vue3';
// Replace the reference path with the real path of the TUILiveKit source code
+ import { liveMainView, liveRoom } from './src/components/TUILive/index.ts';
Step Two: Configure the UIKIT Source Code Development Environment
Configure Vue3 + Vite + TS Development Environment
1. Install development environment dependencies
npm install typescript -S -D
2. Register Pinia
TUILive uses Pinia for room data management. You need to register Pinia in the project entry file, which is the src/main.ts file.
// src/main.ts file
import { createPinia } from 'pinia';
﻿
const app = createApp(App);
// Register pinia
app.use(createPinia()); 
app.mount('#app');
3. Configure esLint verification
If you do not want the esLint rules of the  TUILiveKit component to conflict with your local rules and cause runtime errors, you can add the TUILive folder to the .eslintignore to be ignored.
// Add the real path of the TUILive source code
src/components/TUILive
If you still encounter TypeScript errors during the build process of the project, you can check the package.json file of the project, remove the vue-tsc part in the corresponding build command, as follows:
// package.json
{
    "scripts": {
        // "build": "vue-tsc --noEmit --skipLibCheck && vite build",
        "build": "vite build"
    }
}
4. At this point, you can run the project to view the source code import effect.
npm run dev
Step 3: Modify the Source Code As Required
Replace Icon
You can directly modify the icon components under the /TUILive/components/common/icons  folder to ensure the icon color and style remain consistent throughout the app. Please keep the icon file names unchanged during replacement.
Adjusting the UI Layout
You can adjust the UI layout of TUILive by modifying different components in the TUILive/components/ path.
- components/    
    -Chat
    - common
    -ManageMember
    - RoomContent         Room video
    -RoomFooter          Room page footer
    - RoomHeader          Room page header
    -RoomHome            home page
    -RoomInvite          Invite members
    -RoomLogin           Login page
    - RoomMore            More
    -RoomSetting         settings
Option 2: Custom UI Implementation Method
TUILiveKit's overall functionality is implemented based on RTC Room Engine SDK. You can fully implement your own UI interface based on RTC Room Engine SDK. Details are available in RTC RoomEngine.
﻿