Skip to content

Commit ae766e0

Browse files
SyncfusionBuildSyncfusionBuild
committed
Integrated latest changes at 12-11-2024 7:31:14 AM
1 parent a7c1ed1 commit ae766e0

File tree

27 files changed

+1246
-3
lines changed

27 files changed

+1246
-3
lines changed

‎ej2-vue-toc.html

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -509,6 +509,12 @@
509509
</li>
510510
<li><a href="https://ej2.syncfusion.com/vue/documentation/api/chart/">API Reference</a></li>
511511
</ul>
512+
</li><li>
513+
Chat UI
514+
<ul>
515+
<li><a href="/ej2-vue/chat-ui/getting-started">Getting Started</a></li>
516+
<li><a href="/ej2-vue/chat-ui/vue3-getting-started">Getting Started with Vue 3</a></li>
517+
</ul>
512518
</li><li>
513519
CheckBox
514520
<ul>
@@ -1979,6 +1985,7 @@
19791985
<li><a href="/ej2-vue/pdfviewer/how-to/custom-fonts">Add custom fonts to the PDF Viewer using the PDF document</a></li>
19801986
<li><a href="/ej2-vue/pdfviewer/how-to/configure-annotation-selector-setting">Configure Annotation selector setting</a></li>
19811987
<li><a href="/ej2-vue/pdfviewer/how-to/convert-pdf-library-bounds-to-pdf-viewer-bounds">Convert Pdf Library Bounds to Pdf viewer bounds</a></li>
1988+
<li><a href="/ej2-vue/pdfviewer/how-to/show-custom-stamp-item">Display custom stamp items in custom stamp</a></li>
19821989
</ul>
19831990
</li>
19841991
<li>Troubleshooting

‎ej2-vue/appearance/images/nuxt-3.png

15.6 KB
Loading

‎ej2-vue/chat-ui/getting-started.md

Lines changed: 160 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,160 @@
1+
---
2+
layout: post
3+
title: Getting started with Vue Chat UI component | Syncfusion
4+
description: Checkout and learn about Getting started with Vue Chat UI component of Syncfusion Essential JS 2 and more details.
5+
platform: ej2-vue
6+
control: Chat UI
7+
documentation: ug
8+
domainurl: ##DomainURL##
9+
---
10+
11+
# Getting Started with the Vue Chat UI Component in Vue 2
12+
13+
This article provides a step-by-step guide for setting up a Vue 2 project using [Vue-CLI](https://cli.vuejs.org/) and integrating the Syncfusion Vue Chat UI component using the [Composition API](https://vuejs.org/guide/introduction.html#composition-api) / [Options API](https://vuejs.org/guide/introduction.html#options-api).
14+
15+
## Prerequisites
16+
17+
[System requirements for Syncfusion Vue UI components](https://ej2.syncfusion.com/vue/documentation/system-requirements/)
18+
19+
## Setting up the Vue 2 project
20+
21+
To generate a Vue 2 project using Vue-CLI, use the [vue create](https://cli.vuejs.org/#getting-started) command. Follow these steps to install Vue CLI and create a new project:
22+
23+
```bash
24+
npm install -g @vue/cli
25+
vue create quickstart
26+
cd quickstart
27+
npm run serve
28+
```
29+
30+
or
31+
32+
```bash
33+
yarn global add @vue/cli
34+
vue create quickstart
35+
cd quickstart
36+
yarn run serve
37+
```
38+
39+
When creating a new project, choose the option `Default ([Vue 2] babel, eslint)` from the menu.
40+
41+
<img src="https://ej2.syncfusion.com/vue/documentation/appearance/images/vue2-terminal.png" alt="Vue 2 project">
42+
43+
Once the `quickstart` project is set up with default settings, proceed to add Syncfusion components to the project
44+
45+
## Add Syncfusion Vue packages
46+
47+
Syncfusion packages are available at [npmjs.com](https://www.npmjs.com/search?q=ej2-vue). To use Vue components, install the required npm package.
48+
49+
This article uses the `Vue Chat UI component` as an example. Install the `@syncfusion/ej2-vue-interactive-chat` package by running the following command:
50+
51+
```bash
52+
npm install @syncfusion/ej2-vue-interactive-chat --save
53+
```
54+
or
55+
56+
```bash
57+
yarn add @syncfusion/ej2-vue-interactive-chat
58+
```
59+
60+
## Import Syncfusion CSS styles
61+
62+
You can import themes for the Syncfusion Vue component in various ways, such as using CSS or SASS styles from npm packages, CDN, [CRG](https://ej2.syncfusion.com/javascript/documentation/common/custom-resource-generator/) and [Theme Studio](https://ej2.syncfusion.com/vue/documentation/appearance/theme-studio/). Refer to [themes topic](https://ej2.syncfusion.com/vue/documentation/appearance/theme/) to know more about built-in themes and different ways to refer to themes in a Vue project.
63+
64+
In this article, the `Material` theme is applied using CSS styles, which are available in installed packages. The necessary `Material` CSS styles for the Chat UI component and its dependents were imported into the `<style>` section of **src/App.vue** file.
65+
66+
{% tabs %}
67+
{% highlight html tabtitle="~/src/App.vue" %}
68+
69+
<style>
70+
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
71+
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
72+
@import "../node_modules/@syncfusion/ej2-navigations/styles/material.css";
73+
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
74+
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
75+
@import "../node_modules/@syncfusion/ej2-interactive-chat/styles/material.css";
76+
</style>
77+
78+
{% endhighlight %}
79+
{% endtabs %}
80+
81+
## Add Syncfusion Vue component
82+
83+
Follow the below steps to add the Vue Chat UI component using `Composition API` or `Options API`:
84+
85+
1\. First, import and register the Chat UI component in the `script` section of the **src/App.vue** file. If you are using the `Composition API`, you should add the `setup` attribute to the `script` tag to indicate that Vue will be using the `Composition API`.
86+
87+
{% tabs %}
88+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
89+
90+
<script setup>
91+
import { ChatUIComponent as EjsChatui } from "@syncfusion/ej2-vue-interactive-chat";
92+
</script>
93+
94+
{% endhighlight %}
95+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
96+
97+
<script>
98+
import { ChatUIComponent } from "@syncfusion/ej2-vue-interactive-chat";
99+
100+
export default {
101+
components: {
102+
'ejs-chatui': ChatUIComponent
103+
},
104+
data () {
105+
return {
106+
}
107+
}
108+
}
109+
</script>
110+
111+
{% endhighlight %}
112+
{% endtabs %}
113+
114+
2\. In the `template` section, define the Chat UI component.
115+
116+
{% tabs %}
117+
{% highlight html tabtitle="~/src/App.vue" %}
118+
119+
<template>
120+
<div id="app">
121+
<div id='container' style="height: 400px; width: 400px;">
122+
<br>
123+
<ejs-chatui></ejs-chatui>
124+
</div>
125+
</div>
126+
</template>
127+
128+
{% endhighlight %}
129+
{% endtabs %}
130+
131+
## Run the application
132+
133+
To run the application, use the following command:
134+
135+
```bash
136+
npm run serve
137+
```
138+
139+
or
140+
141+
```bash
142+
yarn run serve
143+
```
144+
145+
{% previewsample "page.domainurl/code-snippet/chat-ui/getting-started" %}
146+
147+
## Configure messages and user
148+
149+
You can use the `messages` property to add messages and the `user` property to configure the current user for the chat.
150+
151+
{% tabs %}
152+
{% highlight html tabtitle="Composition API (~/src/App.vue)" %}
153+
{% include code-snippet/chat-ui/defaultMessage/app-composition.vue %}
154+
{% endhighlight %}
155+
{% highlight html tabtitle="Options API (~/src/App.vue)" %}
156+
{% include code-snippet/chat-ui/defaultMessage/app.vue %}
157+
{% endhighlight %}
158+
{% endtabs %}
159+
160+
{% previewsample "page.domainurl/code-snippet/chat-ui/defaultMessage" %}

‎ej2-vue/chat-ui/images/defaultMessageSample.png

28.7 KB
Loading

0 commit comments

Comments
 (0)