How can I implement real-time updates in Vue.js with Firestore?

How can I implement real-time updates in Vue.js with Firestore?

You can use Firestore's real-time capabilities by setting up a listener on your Firestore collection. When data changes, your Vue.js app will automatically update.

Can you show me a code example for that?

Sure! Here's a simple example:

import { db } from './firebase';

export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    db.collection('yourCollection')
      .onSnapshot(snapshot => {
        this.items = snapshot.docs.map(doc => doc.data());
      });
  }
};

This code listens for changes in 'yourCollection' and updates the items array in real-time.

What if I want to filter the data?

You can add a query to your Firestore listener. For example:

db.collection('yourCollection')
  .where('status', '==', 'active')
  .onSnapshot(snapshot => {
    this.items = snapshot.docs.map(doc => doc.data());
  });

This will only listen for documents where the 'status' field is 'active'.