Cannot get data get data document in vue component with firestore

Question

I cannot get the data from the firestore (firebase database) with vuefire in a vite project with Vue Option Api

I try to modify the database to know if the firebase configuration is wrong. But it works with this code example:

      await addDoc(collection(fireDB, 'gallery'), {
   isVideo: false,
   summary: "ejemplooooo",
   url: "https://picsum.photos/700/600"
 })`

So the problem was not the config. Anyway this is my config:

import { initializeApp } from "firebase/app";
import { getFirestore } from 'firebase/firestore'

// TODO: Add SDKs for Firebase products that you want to use

// https://firebase.google.com/docs/web/setup#available-libraries


// Your web app's Firebase configuration

// For Firebase JS SDK v7.20.0 and later, measurementId is optional

const firebaseConfig = {
  apiKey: "AIzaSyAmyhrAURSP4uPGTjgASanv61AhFlUtlh4",
  authDomain: "vue-band.firebaseapp.com",
  projectId: "vue-band",
  storageBucket: "vue-band.appspot.com",
  databaseURL: 'vue-band.europe-west1.firebasedatabase.app',
  messagingSenderId: "162070937581",
  appId: "1:162070937581:web:a4ac80f5d723469b63b1e4",
  measurementId: "G-GH0X0T3572"
};


// Initialize Firebase

export const firebaseApp = initializeApp(firebaseConfig);

export let fireDB = getFirestore(firebaseApp);

My component is a gallery with a list to view the media:

<script>
import GallerySection from '../components/GallerySection.vue';
import { fireDB } from '../firebase';
import { collection, addDoc } from 'firebase/firestore'
export default {
    name: 'GalleryView',
    data(){
      return{
        mediaList:[],
      }
    },
    firestore: {
        mediaList: collection(fireDB, 'gallery') //<-- I think this not works
    },
    components:{
      GallerySection
    },async mounted(){

//       await addDoc(collection(fireDB, 'gallery'), {
//   isVideo: false,
//   summary: "ejemplooooo",
//   url: "https://picsum.photos/700/600"
// })
      console.log(this.mediaList);
    }
}
</script>
<template>
  <div class="gallery">
    <h1 class="title">Gallery</h1>
    <GallerySection :mediaList="mediaList" />
  </div>
</template>

<style scoped>
  .gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    padding-top: 5rem;
  }
</style>

The output is a console log with a empty list...

Answer 1

First, ensure that your Firestore data security rules allow read access to the 'gallery' collection. You can set your Firestore security rules to allow read access for all users for testing purposes:

rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
    match /{document=**} {
    allow read, write; // WARNING: This allows anyone to read/write to your Firestore!
    }
}
}

Here's a recommended approach to fetch and bind data using VueFire:

1- Remove the manual fetch from the mounted hook:

async mounted() {
    // Remove the manual fetch
}

2- Update the firestore property to bind the collection directly to the mediaList data property:

firestore: {
    mediaList: collection(fireDB, 'gallery'),
},
   

Additionally, ensure you have VueFire properly set up in your Vite project, and the appropriate modules are imported:

import { ref } from 'vue';
import { collection, addDoc } from 'firebase/firestore';
import { useFirestoreCollection } from '@vueuse/firebase';

export default {
name: 'GalleryView',
setup() {
    const mediaList = useFirestoreCollection(collection(fireDB, 'gallery'));

    return {
    mediaList,
    };
},
// ...
};