I am currently facing a challenge in importing data from a Firestore Database into my Vue CLI project. Despite following multiple tutorials, I have not been successful in making it work correctly. It appears that I am encountering difficulties in retrieving the data each time I attempt to do so, as my console.log output does not display anything.
Within a JS file named index.js located in a folder called db (I have omitted the content within quotations for security reasons on Stackoverflow), I have the following code snippet;
import firebase from "firebase";
import "firebase/firestore";
var config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(config);
const db = firebase.firestore();
db.settings({ timestampsInSnapshotps: true });
Subsequently, in my component script, I include the following lines of code;
import db from '@/db'
export default {
name: 'HelloWorld',
data () {
return {
cafes: []
}
},
created () {
db.collection('cafes').get().then((snapshot) => {
console.log(snapshot.docs);
});
}
}
I have come across information indicating that
db.settings({ timestampsInSnapshotps: true });The template structure is as follows;
<template>
<div class="cafes">
<h1>Here are some cafés</h1>
<div for="cafe in cafes" v-bind:key="cafe.name">
<div>
{{cafe.name}}
</div>
</div>
</div>
</template>
Any assistance or guidance would be greatly appreciated as I have been grappling with this issue for several days.