Quasar 
Chat
Quasar supplies a chat component called QChatMessage which is really a chat entry that renders the data given by the props.
Installation
Edit /quasar.conf.js:framework: {
components: ['QChatMessage']
}
Basic Usage
This show a simple chat between two parties.<q-chat-message
label='Sunday, 19th'
/>
<q-chat-message
name="me"
avatar="statics/boy-avatar.png"
:text="['hunter2']"
stamp="4 minutes ago"
sent
/>
<q-chat-message
name="Jane"
avatar="statics/linux-avatar.png"
:text="['hey, if you type in your pw', 'it will show as stars']"
stamp="7 minutes ago"
/>
Vue Properties
| Vue Property | Type | Description |
|---|---|---|
sent | Boolean | Render as a sent message (so from current user) |
label | String | Label of message |
name | String | Name of the message creator |
avatar | String | URL to the avatar image of the creator (use a static resource) |
text | Array | Array of strings that are the message body. Strings are not sanitized, see details below. |
stamp | String | Creation timestamp string |
text-color | String | Color of the text |
bg-color | String | Color of the chat message bubble |
size | Number | 1-12 out of 12 (same as col-*). |
Note that
textproperty is an Array of Strings. This is useful when two or more messages share the same (or very close) timestamp. They will be displayed on separate bubbles, but grouped together more closely so that the name of the creator and timestamp are displayed only once for this kind of group.
IMPORTANT
Strings in thetextproperty are not sanitized so you can display arbitrary html as message. If you display text from unknown source, like messages from users, you should always sanitize it yourself.
Please refer to the demo source for a more complete set of examples.