Message UI Build a UI component for showing the message text

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access


*Enrollment provides full access to this course (and updates) for life.

ChatRoom Component

  <div class="message" :class="{ 'from-user': owner }">
    {{ message.text }}
    <br />

    <audio v-if="message.audioURL" :src="message.audioURL" controls></audio>
    <br />

    <span class="sender">from UID {{ message.sender }}</span>

export default {
    props: ['message', 'owner']
.message {
  background: #dddddd;
  color: black;
  margin-left: 10px;
  margin-right: auto;
  border-radius: 5px;
  padding: 12px;
  display: inline-block;
.from-user {
  margin-right: 10px;
  margin-left: auto;
  background: #91bbff;
.sender {
  font-size: 0.5rem;


Ask questions via GitHub below OR chat on Slack #questions