Using Firebase in a Vue App Vuefire — Adding and Removing Documents

The Vuefire library lets us add Firebase database manipulation capabilities right from our Vue app.

In this article, we’ll look at how to use Vuefire to add support for Cloud Firestore database manipulation into our Vue app.

Removing a Document

Vuefire lets us remove a document with the remove or delete method.

For example, we can write:

db.js

import firebase from "firebase/app";
import "firebase/firestore";
export const db = firebase
  .initializeApp({ projectId: "project-id" })
  .firestore();
const { Timestamp, GeoPoint } = firebase.firestore;
export { Timestamp, GeoPoint };

App.vue

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
    <button @click="remove">remove book</button>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: [],
      bookId: "Cbk7fgYR75xRFkiqq5Qw"
    };
  },
  mounted() {
    this.$bind("books", db.collection("books"));
  },
  methods: {
    remove() {
      db.collection("books")
        .doc(this.bookId)
        .delete();
    }
  }
};
</script>

to remove the books document with ID Cbk7fgYR75xRFkiqq5Qw .

We can also use the this.$firestoreRefs property to access the document we want to delete.

For instance, we can write:

<template>
  <div>
    <div v-for="b of books" :key="b.id">{{b}}</div>
    <button @click="remove">remove book</button>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: [],
      bookId: "pejGvWmS7NMKTRtqXg9z"
    };
  },
  mounted() {
    this.$bind("books", db.collection("books"));
  },
  methods: {
    remove() {
      this.$firestoreRefs.books.doc(this.bookId).delete();
    }
  }
};
</script>

The doc method gets the item with the given ID.

Adding Documents to a Collection

We can add documents to a collection with the add method.

For example, we can write:

<template>
  <div>
    <button @click="add">add book</button>
    <div v-for="b of books" :key="b.id">{{b}}</div>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    this.$bind("books", db.collection("books"));
  },
  methods: {
    add() {
      db.collection("books").add({
        title: "new book"
      });
    }
  }
};
</script>

to add a new document to the books collection.

We can also use the this.$firestoreRefs property to access the collections we bound to our component and call add on it:

<template>
  <div>
    <button @click="add">add book</button>
    <div v-for="b of books" :key="b.id">{{b}}</div>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    this.$bind("books", db.collection("books"));
  },
  methods: {
    add() {
      this.$firestoreRefs.books.add({
        title: "new book"
      });
    }
  }
};
</script>

This will also add a new document to books .

References

We can reference a document in another document.

This is only available when we save data to a Cloud Firestore.

To do that, we just get the document and add it as part of the object we want to save:

<template>
  <div>
    <button @click="add">add book</button>
    <div v-for="b of books" :key="b.id">{{b}}</div>
  </div>
</template>
<script>
import { db } from "./db";
export default {
  data() {
    return {
      books: []
    };
  },
  mounted() {
    this.$bind("books", db.collection("books"));
  },
  methods: {
    add() {
      db.collection("books").add({
        name: "some book",
        author: db.collection("authors").doc("james-smith")
      });
    }
  }
};
</script>

We reference an author document in a new book entry by setting it as the value of a property.

Conclusion

We can add and remove documents easily with Vuefire and Firebase.

Documents can reference other documents.