Vue Google Firebase

A simple firebase plugin for vue.js.

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

🚧 Still in development, new features are still being created.

📚 Table of Contents

• Installation

• Usage

• Firestore API

• Firebase API

• Support

• Contributing

• License

📦 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)

🚀 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>

⚡ Firestore API

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

Title	Type	Default
collection	String	null
query	Object	{}
documentId	String	null
item	Object	{}

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 with document object

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'

})

• Update single document in collection. Returns a promise

this.$firestore.update(collection,documentId,item)

Example. Update a single document in the notes collection. You may also pass in new fields if they don't already exist to create them. Will not create a new document if document id doesn't exist

this.$firestore.update('notes','DOCUMENT-ID-XXX',{

	title:'Wash Dishes & Take out Trash',
	description:'Make sure to clean and dry the dishes & put in new trash bags',
	category:'home'

})

⚡ Firebase API

🚧 Still in development, firebase documentation and functionality coming soon

🛠️ Support

Please open an issue for support.

📝 Contributing

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

📜 License

MIT © Garrett Bland