NOTE: no longer maintained, use vue-fire instead.

A mixin which enables syncing $data of a Vue.js view model with a Firebase reference.

npm install --save vue-firebase-mixin

var firebaseMixin = require('vue-firebase-mixin');
var ref = new Firebase('https://your-firebase.firebaseio.com');
var app = new Vue({
  mixins: [ firebaseMixin ],
  template: '<ul>' +
              '<li v-repeat="people">{{name}} : {{age}}</li>' +
            '</ul>',
  fb: {
    arrays: [
      ref.child('people').orderBy('age').limitToLast(3)
    ],
    values: [
      ref.child('status'),
      ref.child('name')
    ]
  }
});
app.$mount('#app');

This mixin attaches a $fb property on the view model, which has the following API:

Creates a new keypath in $data with the .key() of the Firebase ref. Attaches a listener on the 'value' event and updates the value stored in the keypath.

Creates an array with the reference key in $data and attaches listeners on the Firebase list events(child_added, child_removed, child_moved, child_changed).

Removes the Firebase listeners for the given path, so the value stored in $data is no longer updated. If removeLocal is set to true, it $deletes the keypath from the view model.

Retrieve the Firebase ref instance previously specified in fb or during a .set* operation. Note: If the reference is a Firebase Query, .ref(path) will still return the reference to firebaseUrl/**path** and not the query instance that was passed in.