@fredrikbergelin/vuefire NPM

Vuefire

Vue.js bindings for Firebase Cloud Firestore and the Realtime Database

VueFire makes it super easy to bind firestore collections and documents and keep your local data always up to date with their remote versions.

Firebase Realtime database

Installation

yarn add firebase vuefire
# or
npm i firebase vuefire

Usage

Make sure to check the documentation for full usage instructions and tips

`firestore` option

Vuefire adds a new firestore option to any component. Like data, it can be a function that returns an object too. Make sure to create any property added to firestore in data as well, like todos and currentTodo in the following example:

import { firestorePlugin } from 'vuefire'

Vue.use(firestorePlugin)

new Vue({
  data: {
    // use an array for collection
    todos: [],
    // and null for documents
    currentTodo: null,
  },
  firestore: {
    todos: db.collection('todos'),
    currentTodo: db.collection('todos').doc('1'),
  },
})

`$bind` and `$unbind`

Vuefire globally adds $bind and $unbind so you can programatically bind and unbind collections/documents/queries to an existing property in your Vue application:

// TodoList.vue
export default {
  data: () => ({ todos: [] }),
  created() {
    // this unbinds any previously bound reference
    this.$bind('todos', db.collection('todos')).then(todos => {
      this.todos === todos
      // todos are ready to be used
      // if it contained any reference to other document or collection, the
      // promise will wait for those references to be fetched as well

      // you can unbind a property anytime you want
      // this will be done automatically when the component is destroyed
      this.$unbind('todos')
    })
  },
}

Tips:

Use an empty array [] as the initial value for a property that holds a collection to make v-for always work.
Use null for documents so you can wrap content with a simple v-if (ref vue guide)