// Tutorial //

Vue.js Firebase Integration with VueFire

Published on April 12, 2017
Default avatar
By Joshua Bemenderfer
Developer and author at DigitalOcean.
Vue.js Firebase Integration with VueFire

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Firebase is one of the most painless ways to set up a 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.

  1. yarn add firebase vuefire
  1. 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 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()
}

You can find more information and documentation in the VueFire repository and Firebase docs.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Developer and author at DigitalOcean.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment
Leave a comment...

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click here to sign up and get $200 of credit to try our products over 60 days!
Try DigitalOcean for free