Writing to the database

As said in the introduction, Vuefire does not handle writing data back to Firebase because you can directly use the Firebase JS SDK to precisely update whatever you need. Here are some examples on how to create, update and remove documents but make sure to refer to the official documentation to go further:

Updates to collection and documents

There are two ways to update a document set and update. The first will replace the whole document (as a PUT in HTTP) while the later will keep the original document and overwrite values (as a PATCH in HTTP).

TIP

In the following examples, this.user is a user bound to a Firebase document using Vuefire while this.conferences is a list of conferences bound to a Firebase collection using Vuefire.

Replacing a document

If we want to update the whole user we can use set:

// we first create a copy that excludes `id`
// this exclusion is automatic because `id` is non-enumerable
const user = { ...this.user }
user.lastName = newLastName

db.collection('users')
  .doc(this.user.id)
  .set(user)
  .then(() => {
    console.log('user updated!')
  })
// we can also use `$firestoreRefs.user` to refer to the bound user reference
this.$firestoreRefs.user.set(user)

Updating a document

You can achieve a similar thing by calling update with lastName instead:

this.$firestoreRefs.user.update({ lastName: newLastName }).then(() => {
  console.log('user updated!')
})

Removing a document

You can remove documents by calling remove/delete on their reference which can be accessed directly on $firebaseRefs/$firestoreRefs or by creating a new reference using the database object:

db.collection('cities')
  .doc(cityId)
  .delete()
this.$firestoreRefs.cities.doc(cityId).delete()
this.$firestoreRefs.selectedCity.delete()

Adding documents to a collection

You can add documents to collections by calling push/add on a collection reference:

db.collection('cities').add({
  name: 'Fuengirola',
  slogan: 'Un sol de ciudad',
})
this.$firestoreRefs.cities.add({
  name: 'Paris',
  slogan: 'La Ville lumière',
})

• RTDB: Updating or deleting data (opens new window)
• RTDB: Reading and writing lists (opens new window)
• Add data to Cloud Firestore (opens new window)

References

References are only supported by Cloud Firestore

To write a reference to a document, you pass the actual reference object:

db.collection('books').add({
  name: '1984',
  author: db.collection('authors').doc('george-orwell'),
})

Geopoints

Geopoints are only supported by Cloud Firestore Refer to Plugin installation to retrieve the Geopoint class

import { GeoPoint } from './db'

// add Paris to the list of cities and wait for the operation
// to be finished
await db.collection('cities').add({
  name: 'Paris',
  location: new GeoPoint(48.8588377, 2.2770206),
})

Timestamps

Timestamps are only supported by Cloud Firestore Refer to Plugin installation to retrieve the Timestamp class

import { Timestamp } from './db'

// Add "La prise de la Bastille" to a list of events
// and wait for th operation to be finished
await db.collection('events').add({
  name: 'Prise de la Bastille',
  date: Timestamp.fromDate(new Date('1789-07-14')),
})

Current Timestamp

When you need the current time at creation or update, you need to pass a special value to tell Firebase to use the server value instead

import { Timestamp } from './db'

await db.collection('documents').add({
  name: 'A document',
  createdAt: firebase.firestore.FieldValue.serverTimestamp(),
})