Chat Message

Quasar supplies a chat component called QChatMessage which is really a chat entry that renders the data given by the props.

TIP

To mix messages with avatar and without avatar in the same thread, use a placeholder avatar image.

Installation

// quasar.conf.js

return {
  framework: {
    // NOT needed if using auto-import feature:
    components: [
      'QChatMessage'
    ]
  }
}

Usage

The basics

TIP

Using the property sent is intended for the sender of the chat message. The other side is for received messages.

Basic
Name
Avatar
Stamp
Label

Customization

Text and background color
Size

Slots

Default slot
Avatar slot

Sanitization

WARNING

Always sanitize values if you do not trust the origin (if the value comes from user input).

Sanitized content

QChatMessage API