Introduction to VueFire

The intention of this tutorial in article shape is to bring up some content about the Vue.js integration with Firebase. All the aproaches here used can be confirmed in both technologies documentations and VueFires Repo too.


Prerequisites

For the complete understanding of what’s being proposed here, you need to be sure that you know something about:

  • The Vue.js SPA Component Development Basics;
  • The Firebases RTDB structuring with JSON documents;
  • What is a Callback and how it works on Firebases enviroment;

It’s not a lot, but the understanding of these concepts will help you with the development progress. Therefore, if you don’t understand some of these it means that you should read about it in the Useful Links section.


The Begining

What about Firestore?

First, I want to elucidate that recently the Firebase Cloud Firestore was released. The FCFS is a new implementation of the Document-Collection concept. This database comes with the promise of being more efficient (and in fact, it is) with the query system and the data-structuring of more complex apps.

However, the Firestore release is a very recent event, and Vuefire doesn’t support it yet (we’re waiting for it!). In this article, I’ll only bring the RTDB (Real-time Database) approach. The RTDB can be set as a simpler version of the Firestore, but it’s older too compared with the other Firebase Services.

Whenever you start to use a new API, the first step is to include it in your project via installation. The easier way to do this is using npm.

npm install vue firebase vuefire --save

This way you’re going to include Vue.js, Firebase and VueFires latest versions in your dependencies at your package.json.

After installing, include the VueFire in your main.js file:

import Vue from 'vue'
import VueFire from 'vuefire'

Vue.use(VueFire)

At this point, I’m considering that you’ve already started a project with firebase.initializeApp (config). Otherwise, you can do this with the config object information that you can get in the Firebase Console:

//main.js or firebaseConfigured.js
let config = {
apiKey: ...,
authDomain: ...,
databaseURL: ...,
projectId: ...,
storageBucket: ...,
messagingSenderId: “...”
}
firebase.initializeApp(config)

You can also use VuexFire or export the already configured firebase object to a specific file called firebaseConfigured.js (or whatever name you want):

//firebaseConfigured.js
import * as firebase from 'firebase'
let config = { ... }
firebase.initializeApp(config)
export default firebase

Ok, but how will I access my data?

If you already have a sense of how the firebase API works, you already know that the data is loaded asynchronously.

What VueFire does for you is the automatic management of database references and callbacks by injecting the information into a variable of your choice in the specified component.

Got confused? Let me explain.

Inside the component, VueFire allows you to create a specific attribute called firebase, as follows:

export default {
props: {
database: { required: true, ... }
},
methods: { ... },
computed: { ... },
//Look, it's down here
firebase: {
beautifulUsers: this.database
.ref('users')
.orderByChild('tipe')
.equalTo('beautiful')
}
}

In this attribute, you pass a database reference. By default, the data will be loaded as an Array, but it can be avoided:

firebase: {
beautifulUsers: {
source: this.database.ref( //Your ref ),
asObject: true,
readyCallback(snapshot){ //After loading the ref },
cancelCallback(erro){ //Oops.. Something got wrong }
}
}

Note that you can also specify two Callbacks to control the loading of your data in a more structured way.

If you need the data at a specific time after loading the component or want to change the reference of your variable, you can do it manually via code by $bindAsArray and $bindAsObject:

export default {
props: {
database: { required: true, ... }
},
methods: { ... },
computed: { ... },
firebase: { ... },
created(){
this.$bindAsObject(
'user',
this.database.ref('users').child('usersUID')
)
}
}

You can also include both readyCallback and cancelCallback optionally by manual binding:

this.$bindAsArray(
'users',
this.database.ref('users'),
snap => { //cancelCallback },
error => { //readyCallback }
)

Updating the Data

If you want to insert, change, or remove objects, you can access the specified databaseRefs anytime you want within the component:

methods: {
insert(user){
this.$firebaseRefs.users.push(user)
},
remover(userUID){
this.$firebaseRefs.users.child(userUID).remove()
}
}

Getting the key of each object

To access your object key without having to use Callbacks, VueFire adds an attribute in its object called “.key”, which can be accessed this way:

created(){
console.log('Component Created with users key',
this.user['.key']
)
}

When you change the data, it is highly recommended that you delete the “.key” attribute. This way, firebase saves it in the database (it’s best explained in VueFires README.md).

Finally

Well, guys, I hope this tutorial can be useful for the introduction of this incredible API to you. Remember that everything that was commented here can be found in VueFires repository and Firebase/Vue.js docs.

Thx, see ya!

Useful Links

Firebase Docs;

Vue.js Docs;

VueFire Repository;

Build A Real-Time Chat App With VueJS, Vuex & Cloud Firestore;

Cloud Firestore Issue;