vue-firestore

Vue.js binding for firebase cloud firestore.

Installation

Installation via npm : npm install vue-firestore --save

Usage

vue-firestore supports binding for the both (collections/docs) in realtime, you can bind your properties in tow ways using firestore option or bind them manually with $binding.

1. using firestore option.

import Vue from 'vue'
import VueFirestore from 'vue-firestore'
import Firebase from 'firebase'

require('firebase/firestore')

Vue.use(VueFirestore)

var firebaseApp = Firebase.initializeApp({ ... })

const firestore = firebaseApp.firestore();

var vm = new Vue({
  el: '#app',
  firestore() {
    return {
        // Collection
        persons: firestore.collection('persons'),
        // Doc
        ford: firestore.collection('cars').doc('ford')
    }
  }
})

2. Manually binding

You can bind your docs/collection manually using this.$binding, and wait for data to be resolved, this case is really usful when we want to wait for data to be rendred and do some speccific actions.

...
mounted() {
  // Binding Collections
  this.$binding("users", firebase.firestore().collection("users"))
  .then((users) => {
    console.log(users) // => __ob__: Observer
  })
  
  // Binding Docs
  this.$binding("Ford", firebase.firestore().collection("cars").doc("ford"))
  .then((ford) => {
    console.log(ford) // => __ob__: Observer
  }).catch(err => {
    console.error(err)
  })
}
...

You can get access to firestore properties with this.$firestore.

Adding Data to collections

var vm = new Vue({
  el: '#app',
  firestore: function() {
    return {
        persons: firestore.collection('persons')
    }
  },
  methods:{
    addData: function() {
        this.$firestore.persons.add({
            firstname: "Amrani",
            lastname: "Houssain"
        })
    }
  }
})

Each record of the array will contain a .key property which specifies the key where the record is stored.

The Result of persons collection will be normalized as :

[
    {
        ".key": "-Jtjl482BaXBCI7brMT8",
        "firstname": "Amrani",
        "lastname": "Houssain"
    },
    {
        ".key": "-JtjlAXoQ3VAoNiJcka9",
        "firstname": "John",
        "lastname": "Doe"
    }
]

You could delete or update a json document of a collection using the property .key of a given object.

// Vue methods
deletePerson: function(person) {
    this.$firestore.persons.doc(person['.key']).delete()
},
updatePerson: function(person) {
    this.$firestore.persons.doc(person['.key']).update({
        name: "Amrani Houssain"
        github: "@amranidev"
    })
}

LICENSE

MIT