vue-google-firebase v0.0.3

Vue Google Firebase

A simple firebase plugin for vue.js.

:fire: Vue plugin to easy implement firebase, firestore, authentication, and more into your vue application.

:construction: Still in development, new features are still being created.

:books: Table of Contents

• Installation
• Usage
• Firestore API
• Firebase API
• Support
• Contributing
• License

:package: Installation

1. Install

npm install firebase vue-google-firebase

or

yarn add firebase vue-google-firebase

2. Import and install plugin. (example, in main.js)

import VueGoogleFirebase from 'vue-google-firebase'

let config = {
  apiKey: XXXXXXXXX,
  authDomain: XXXXXXXXX,
  databaseURL: XXXXXXXXX,
  projectId: XXXXXXXXX,
  storageBucket: XXXXXXXXX,
  messagingSenderId: XXXXXXXXX,
  appId: XXXXXXXXX
}

Vue.use(VueGoogleFirebase,config)

:rocket: Usage

Vue Google Firebase exposes a global instance property of both $firestore or $firebase to use anywhere in your app. Simple example below

<template>
  <div>
    <ul v-for="item in items">
      <li>{{ item.data.title }}</li>
    </ul>
  </div>
</template>
<script>
export default {
  name:'example',
  data(){
    return {
      items:[]
    }
  },
  methods:{
    getData(){
      var state = this
      
      // Retrieves notes collection
      this.$firestore.list('notes').then(function(items){
        state.items = items
      })
    }
  },
  mounted(){
    this.getData()
  }
}
</script>

:zap: Firestore API

Syntax format - this.$firestore.method(collection,query | document)

Note: The query object accepts parameters set by firestore. Please refer here for the official firestore documentation

Methods

• Retrieve items from collection. Returns a promise.

this.$firestore.list(collection,query)

Example. Retrieve notes collection, specify a where and limit items.

this.$firestore.list('notes',{
  where:[ "user" ,"==", "garrett" ],
  limit:5
})

• Get single document from collection. Returns a promise.

this.$firestore.get(collection,documentId)

Example. Retrieves single document from notes collection

this.$firestore.get('notes','DOCUMENT-ID-XXX')

• Create document in collection. Returns a promise and newly created document id

this.$firestore.add(collection,item)

Example. Create a new document in the notes collection

this.$firestore.add('notes',{
  title:'Wash Dishes',
  description:'Make sure to clean and dry the dishes'
})

:zap: Firebase API

:construction: Still in development, firebase documentation and functionality coming soon

:hammer_and_wrench: Support

Please open an issue for support.

:memo: Contributing

Please contribute using Github Flow. Create a branch, add commits, and open a pull request.

:scroll: License

MIT © Garrett Bland