Using Firebase in a Vue App Vuefire and Vuexfire
Tags: vue, webdev, programming, javascript
Published: 2021-01-26 01:23:14

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**


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.