Using Firebase in a Vue App Vuefire and Vuexfire

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 and Vuexfire to add support for Cloud Firestore database manipulation into our Vue app.

Geopoints

We can add the latitude and longitude of a location with the GeoPoint constructor.

This is only supported with the CloudFirestore.

For example, we can write:

<template>
  <div>
    <button @click="add">add city</button>
    <div v-for="c of cities" :key="c.id">{{c}}</div>
  </div>
</template>
<script>
import { db, GeoPoint } from "./db";
export default {
  data() {
    return {
      cities: []
    };
  },
  mounted() {
    this.$bind("cities", db.collection("cities"));
  },
  methods: {
    async add() {
      await db.collection("cities").add({
        name: "London",
        location: new GeoPoint(51.3, 0)
      });
    }
  }
};
</script>

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

We called the add method with a GeoPoint instance to save the latitude and longitude of a location.

Then we should get something like:

{ "name": "London", "location": { "latitude": 51.3, "longitude": 0 } }

saved.

Timestamps

Also, we can save timestamps with Vuefire.

We use the Timestamp.fromDate method to create our timestamp.

For example, we can write:

<template>
  <div>
    <button @click="add">add event</button>
    <div v-for="e of events" :key="e.id">{{e}}</div>
  </div>
</template>
<script>
import { db, Timestamp } from "./db";
export default {
  data() {
    return {
      events: []
    };
  },
  mounted() {
    this.$bind("events", db.collection("events"));
  },
  methods: {
    async add() {
      await db.collection("events").add({
        name: "event",
        date: Timestamp.fromDate(new Date("2029-07-14"))
      });
    }
  }
};
</script>

We passed in a Date instance to Timestamp.fromDate .

Then we get something like:

{ "name": "event", "date": { "seconds": 1878681600, "nanoseconds": 0 } }

saved as a result.

Vuefire

We can use Vuefire to get and set data from Firebase database and store the database’s state in our Vuex store.

To use it, we install the required packages by running:

yarn add vuex vuexfire vuefire firebase

or

npm i vuex vuexfire vuefire firebase

Now we can create our Vuex store and bind our store to the Firebase database by writing:

main.js

import Vue from "vue";
import App from "./App.vue";
import { firestorePlugin } from "vuefire";
import { vuexfireMutations, firestoreAction } from "vuexfire";
import Vuex from "vuex";
import { db } from "./db";

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

const store = new Vuex.Store({
  state: {
    books: []
  },
  mutations: {
    ...vuexfireMutations
  },
  actions: {
    bindBooksRef: firestoreAction((context) => {
      return context.bindFirestoreRef("books", db.collection("books"));
    })
  },
  getters: {
    books: (state) => {
      return state.books;
    }
  }
});

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

App.vue

<template>
  <div>{{books}}</div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
  data() {
    return {};
  },
  methods: {
    ...mapActions(["bindBooksRef"])
  },
  computed: {
    ...mapGetters(["books"])
  },
  mounted() {
    this.bindBooksRef();
  }
};
</script>

We create our store with the Vuex.Store constructor as usual.

But we import the vuefireMutations and put it in our store.

Also, our actions are created with the fireStoreAction function.

And we call the context.bindFirestoreRef method to get our store data and set it as the state.

The first argument is the state name, and the 2nd is the collection we want to bind to the state with the given name.

Also, we have a getter to get the books state.

In App.vue , we map the actions and getters to methods and computed properties respectively.

After we done that, we can call this.bindBooksRef action which we mapped to a method to populate the books state.

Then our template should show the books data.

Conclusion

We can add geolocation and timestamp data with Vuefire.

Also, the Vuexfire library lets us bind the Firebase database to our Vuex store easily.