# Get started

VChatCloud Vue UI Kit is a library that allows you to easily integrate VChatCloud services into your Vue project.

[ NPM Version ](https://www.npmjs.com/package/@vchatcloud/vue-ui (opens new window) -kit)

Enter the command to add @vchatcloud/vue-ui-kit as a dependency to the project.

# installation

npm install @vchatcloud/vue-ui-kit
#or
# yarn add @vchatcloud/vue-ui-kit
#or
# pnpm add @vchatcloud/vue-ui-kit

1
2
3
4
5

# How to use

First, add the following content to index.html. I wrote two script tags between head.

<head>
  <!-- ...existing code -->
  <script src="https://www.vchatcloud.com/lib/e7lib-latest.min.js"></script>
  <script src="https://www.vchatcloud.com/lib/vchatcloud-last.min.js"></script>
</head>

1
2
3
4
5

Then, to use the UI kit in your project, you import and use the required components. You can set up and run VChatCloud using the VChatCloudApp component.

# Code example

import { VChatCloudApp, VChatCloudAppProps } from "@vchatcloud/vue-ui-kit";
import { onMounted, onUnmounted, ref } from "vue";

const vChatCloudAppProps: VChatCloudAppProps = {
  nickName: "YOUR_NICK_NAME",
  roomId: "YOUR_ROOM_ID",
  clientKey: "YOUR_CLIENT_KEY",
  email: "example@example.com", // Set account email in CMS
  grade: "user", // Set the user's grade
  privateContainer: "PRIVATE_CONTAINER", // Set the tag where the secret chat room will be located
  sessionType: "parameter", // Connection method settings
  userInfo: { profile: 8 }, // `userInfo` settings
  ...
};

// When using private container
const mutationObserver = ref<MutationObserver>();
const showPrivateWrap = ref(false);

const config = {
  attributes: true;
  childList: true;
  characterData: true;
};

const disconnect = () => {
  showPrivateWrap.value = false;
  mutationObserver.value?.disconnect();
};

onMounted(() => {
  if (privateWrap.value) {
    mutationObserver.value = new MutationObserver(() => {
      showPrivateWrap.value = true;
    });
    mutationObserver.value.observe(privateWrap.value, config);
  }
});

onUnmounted(() => {
  disconnect();
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

<template>
  <VChatCloudApp
    :nick-name="vChatCloudAppProps.nickName"
    :room-id="vChatCloudAppProps.roomId"
    :client-key="vChatCloudAppProps.clientKey"
    :email="vChatCloudAppProps.email"
    :grade="vChatCloudAppProps.grade"
    :private-container="vChatCloudAppProps.privateContainer"
    :session-type="vChatCloudAppProps.sessionType"
    :user-info="vChatCloudAppProps.userInfo"
    :url="vChatCloudAppProps.url"
    :logo="vChatCloudAppProps.logo"
    :description="vChatCloudAppProps.description"
    :footer-description="vChatCloudAppProps.footerDescription"
    @exit="disconnect"
  />
  <!-- Wrapper for secret chat -->
  <div
    ref="privateWrap"
  />
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Component description

# VChatCloudApp

Initialize VChatCloud by passing the necessary props to the VChatCloudApp component. The main props are:

variable name	Required or not	Type	Description
`nickName`	required	string	user nickname
`roomId`	required	string	Chat room ID
`clientKey`	required	string	client key
`sessionType`	required	SessionType	Connection method. `login`: When a login page is needed. `parameter`: When a login page is not needed. `private`: When entering a secret chat room
`email`	optional	string	VChatCloud CMS Account ID
`grade`	optional	ChannelUserGrade	user level (user, userManager, etc.)
`privateContainer`	optional	string / HTMLElement	Location to place when creating a secret chat room
`userInfo`	optional	unknown	Additional user information (in object form). If you specify a number in userInfo.profile, you can use the default profile image. (1 to 48 provided)
`logo`	optional	string	You can change the logo image that appears on the login screen.
`description`	optional	string	You can change the description at the bottom of the logo on the login screen.
`footerDescription`	optional	string	You can change the footer content to be displayed on the login screen.

# caution

When logging in with the same clientKey, the previously logged in user will be disconnected.
Only maximum 1 can be created in secret chat rooms.
The ability to create a new secret chat room in a secret chat room is limited.

← Overview Customizing →