Query Messages Query most recent messages in a subcollection of the chat room 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 👈 Dynamic Routing Message UI 👉 ChatRoom Component ChatRoom.vue <template> <main class="section"> <h3>Welcome to ChatRoom.vue {{ chatId }}</h3> <User #user="{ user }"> <div v-if="user"> <ul> <li v-for="message of messages" :key="message.id"> {{ message.text }} </li> </ul> <input v-model="newMessageText" class="input" /> <button :disabled="!newMessageText || loading" class="button is-success" type="text" @click="addMessage(user.uid)" >Send</button> </div> <Login v-else /> </User> </main> </template> <script> import User from './User.vue'; import Login from './Login.vue'; import { db, storage } from '../firebase'; export default { components: { User, Login }, data() { return { newMessageText: '', loading: false, messages: [], } }, computed: { chatId() { return this.$route.params.id; }, messagesCollection() { return db.doc(`chats/${this.chatId}`).collection('messages'); }, }, firestore() { return { messages: this.messagesCollection.orderBy('createdAt').limitToLast(10) }; }, methods: { async addMessage(uid) { this.loading = true; const { id: messageId } = this.messagesCollection.doc(); await this.messagesCollection.doc(messageId).set({ text: this.newMessageText, sender: uid, createdAt: Date.now(), }); }, }; </script> 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