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.
Get Unlimited PRO Access


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

ChatRoom Component

  <main class="section">
    <h3>Welcome to ChatRoom.vue {{ chatId }}</h3>

    <User #user="{ user }">
      <div v-if="user">
          <li v-for="message of messages" :key="message.id">
            {{ message.text }}

        <input v-model="newMessageText" class="input" />

          :disabled="!newMessageText || loading"
          class="button is-success"


      <Login v-else />




import User from './User.vue';
import Login from './Login.vue';
import { db, storage } from '../firebase';

export default {
  components: {
  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(),



Ask questions via GitHub below OR chat on Slack #questions