This is my first time using both Vuetify and Firebase.
Following a tutorial, I was trying to add some data to my db in firebase (not images).
After installing firebase in my project with npm, I’ve set it up in a separate js file like this:
import { initializeApp } from "firebase/app"; import { getFirestore, collection, getDocs } from 'firebase/firestore/lite'; import { getAnalytics } from "firebase/analytics"; const firebaseConfig = { apiKey: "....", ... ... }; const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app); const db = getFirestore(app);
In the vue.js file where I have the form for the new object with data that I want to add, I’m trying to do like this:
Template:
<template> <v-dialog max-width="600px"> <v-btn flat slot="activator" class="success"> Add new project </v-btn> <v-card> <v-card-title> <h1 class="display-1">Add a new project</h1> </v-card-title> <v-form class="px-3" ref="newProjectForm"> <v-card-text> <v-text-field label="Title" v-model="title" prepend-icon="folder" :rules="inputRules"></v-text-field> <v-textarea :rules="inputRules" label="Information" v-model="content" prepend-icon="edit"></v-textarea> <v-menu> <v-text-field :rules="inputRules" slot="activator" :value="formattedDate" label="Due date" prepend-icon="date_range"></v-text-field> <v-date-picker v-model="due"></v-date-picker> </v-menu> <v-spacer></v-spacer> <v-btn flat class="success mx-0 mt-3" @click="submit">Add project</v-btn> </v-card-text> </v-form> </v-card> </v-dialog> </template>
Script:
import format from 'date-fns/format' import parseISO from 'date-fns/parseISO' import db from '@/fb' export default { data(){ return{ title : "", content : "", due : null, inputRules: [ v => v.length >= 4 || "Minimum length is 3 characters ", ] } }, methods:{ submit(){ if(this.$refs.newProjectForm.validate()){ // console.log(this.title,this.content,this.due); const project = { title: this.title, content: this.content, due: format(parseISO(this.due), 'eee do MMMM y'), person :'myself', status: 'ongoing' } db.collection('Listify').add(project).then(() => console.log('added to db')) } } }, computed: { formattedDate () { console.log(this.due) return this.due ? format(parseISO(this.due), 'eee do MMMM y') : '' } }} </script>
The error logged is “TypeError: Cannot read properties of undefined (reading ‘collection’)”
I know I am probably importing something the wrong way, but I am very new to this and I didn’t get a good grasp at it yet.
I want to upload the object coming from the form to the Firebase db, could you explain me how to and what I am missing with the usage of fire base?
Also my npm version is 8.3.1 (I can’t update it atm) is it a problem?
UPDATE:
The solution offered by Frank van Puffelen worked but I still could not get it to work as long as firebase set up was in an external js file, as long as I pasted out everything in the file where I was calling the submit method, it worked!
Advertisement
Answer
You’re importing Firestore like this:
import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
This is the syntax for the “new” v9 version of the SDK, which uses a modular syntax. But then you’re trying to call:
db.collection('Listify').add(project).then(() => console.log('added to db'))
This is the namespaced syntax for the older SDKs. You can’t mix and match the syntax like that.
In the modular syntax, the equivalent call would be:
addDoc(collection(db, 'Listify'), project).then(...)
Also see:
- The Firebase documentation on adding a document
- The upgrade guide for v9
- Some of the existing posts about the error message you got