Vue.js Firebase Integration with VueFire

Joshua Bemenderfer

No matter what you think of itโ€™s capabilities, Firebase is still one of the most painless ways to set up a simple hosted realtime database. VueFire makes life even easier by providing direct mapping and updates to firebase objects through Vueโ€™s reactivity system. Combined, the result is wonderfully simple and clear.

Usage

Install firebase and vuefire in your Vue.js project, through NPM or Yarn.

# Yarn
$ yarn add firebase vuefire

# NPM
$ npm install firebase vuefire --save

Then, in your appโ€™s main file, enable the VueFire plugin.

main.js

import './firebase';

import Vue from 'vue';
import VueFire from 'vuefire';
import App from 'App.vue';

Vue.use(VueFire);

new Vue({
  el: '#app',
  render: h => h(App)
});

We also need to initiate the firebase connection. Create a new file called firebase.js.

firebase.js

import Firebase from 'firebase'

const firebaseApp = Firebase.initializeApp({
  // Populate your firebase configuration data here.
  ...
});

// Export the database for components to use.
// If you want to get fancy, use mixins or provide / inject to avoid redundant imports.
export const db = firebaseApp.database();

Now, we can access data in our firebase database (say that ten times fast) directly from Vue components.

App.vue

<template>
  <p v-for="user of users">
    {{user.name}}
  </p>
</template>
<script>
import {db} from './firebase';

export default {
  data() {
    return {
      users: {}
    }
  },

  firebase: {
    users: {
      source: db.ref('users'),
      // Optional, allows you to handle any errors.
      cancelCallback(err) {
        console.error(err);
      }
    }
  }
}
</script>

Whenever the users collection updates, the users data object will update on the client as well. Howโ€™s that for a seamless reactive database?

Modifying data

You can modify arrays as normal in this.$firebaseRefs. (ie. this.$firebaseRefs.users.push({name: 'Tom Bombadil'})). Normal Vue reactivity rules and caveats apply.

Unfortunately, modifying objects can be a bit trickier. That has to be done fairly manually using the firebase ref directly.

updateUserName(user, newName) {
  this.$firebaseRefs.users.child(user['.key']).child('name').set(newName);
}

removeUser(user) {
  this.$firebaseRefs.users.child(user['.key']).remove()
}

Further information and documentation can be found in the VueFire repository and Firebase docs.

  Tweet It

๐Ÿ•ต Search Results

๐Ÿ”Ž Searching...

Sponsored by #native_company# โ€” Learn More
#native_title# #native_desc#
#native_cta#