DEV Community

loading...

Using Firebase in a Vue App Vuefire and Vuexfire

aumayeung profile image John Au-Yeung Originally published at thewebdev.info ・3 min read

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>
Enter fullscreen mode Exit fullscreen mode

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 };
Enter fullscreen mode Exit fullscreen mode

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 } }
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

We passed in a Date instance to Timestamp.fromDate .

Then we get something like:

{ "name": "event", "date": { "seconds": 1878681600, "nanoseconds": 0 } }
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

or

npm i vuex vuexfire vuefire firebase
Enter fullscreen mode Exit fullscreen mode

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");
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide