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. *Enrollment provides full access to this course (and updates) for life. Or Signup for Unlimited PRO Access 📼 Login to Watch 👈 Query Messages Capture Audio 👉 ChatRoom Component ChatMessage.vue <template> <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> </div> </template> <script> export default { props: ['message', 'owner'] }; </script> <style> .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; } </style> Chapters Get Started 📜 1 Resources Project source code and Vue Firebase resources 1:44 ⚡ 2 Vue Setup Get started with the Vue CLI free 3:43 🔥 3 Firebase Setup Install Firebase and the Vuefire package 3:25 🚆 4 Your First Component Build a basic home page component with routing free 2:13 User Authentication 👤 5 Anonymous Auth Basic user authentication with Firebase 2:02 👥 6 Realtime Auth State React to changes to the Firebase User Auth State free 4:02 👋 7 User Profile Create a user profile where the user can sign out 1:51 📧 8 Email Password Authentication Bind to forms in Vue to sign up with email & password 6:02 Firestore Chat 💬 9 Create Chat Rooms Create a chat room in Firestore linked to the current user 2:50 🔍 10 Query Chat Rooms Query all chat rooms owned by the current user 1:48 🚉 11 Dynamic Routing Load a chat room based on its document ID with the Vue Router 2:14 📩 12 Query Messages Query most recent messages in a subcollection of the chat room 3:48 🎀 13 Message UI Build a UI component for showing the message text 2:32 Voice Messages 🎙️ 14 Capture Audio Record a stream from the user's microphone using the MediaRecorder API 3:19 📤 15 Upload Upload the audio file to Firebase Storage and link it to a Firestore document 3:33 🍰 16 Wrap up Final thoughts and ideas to improve the quality of the app. 1:51