Getting Started with Vue and Firebase with Vuefire

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.

Getting Started

We can get started by going to the Firebase console.

Once we’re logged in, we click Add project to add a project.

Then we click on the project link.

Then we click on the Cloud Firestore link on the left sidebar.

After that, we follow the instructions to create the database and add some entries to it.

Next, we create our Vue app by running npx vue create . in our Vue project folder.

Now we install the Firebase and Vuefire packages by running:

npm install vuefire firebase

or

yarn add vuefire firebase

Vuefire requires Firebase JS SDK 4 or later.

Once we did that, we add a db.js file into the src folder to hold the shared database access code.

In there, we add:

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 };

We call firebase with the project ID to get access the database.

In main.js , we write:

import Vue from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";

Vue.use(firestorePlugin);
Vue.config.productionTip = false;

new Vue({
  render: (h) => h(App)
}).$mount("#app");

to add the firestorePlugin plugin from Vuefire so we can use its methods everywhere.

Then in our component file, we can write:

<template>
  <div id="app">
    <div v-for="b of documents" :key="b.id">{{b.title}}</div>
  </div>
</template>

<script>
import { db } from "./db";

export default {
  name: "App",
  data() {
    return {
      documents: []
    };
  },

  firestore: {
    documents: db.collection("books")
  }
};
</script>

to access the books collection with the documents array.

The firestore property maps our Firestore databases to the property we use to access it.

In the template, we just loop through the array with the items we added the Cloud Firestore collection.

If we want to display items by its ID in a component, we’ve to watch for changes to the id and reload the data accordingly.

To do this, we write:

Book.vue

<template>
  <div>{{book.title}}</div>
</template>

<script>
import { db } from "./db";
const books = db.collection("books");

export default {
  props: ["id"],
  data() {
    return {
      book: {}
    };
  },

  watch: {
    id: {
      immediate: true,
      handler(id) {
        this.$bind("book", books.doc(id));
      }
    }
  }
};
</script>

App.vue

<template>
  <div id="app">
    <Book v-for="b of books" :id="b.id" :key="b.id"></Book>
  </div>
</template>

<script>
import { db } from "./db";
import Book from "./Book.vue";

export default {
  name: "App",
  components: {
    Book
  },
  data() {
    return {
      books: []
    };
  },

  firestore: {
    books: db.collection("books")
  }
};
</script>

We add the Book.vue component that watches the id and calls the this.$bind method to get the book entry with the given id .

Then in the template, we display the title property from the entry.

immediate makes the watcher run immediately when the component is loaded.

Then in App.vue , we get the whole books collection in the firestore property and bind the entries to the books state.

In the template of App.vue , we loop through the books entries and render them with the Book component we just created.

Then we should see the entries from books rendered.

Conclusion

Vuefire is a very useful library for accessing our Cloud Firestore database directly from our Vue app.