All Projects → gdg-tangier → Vue Firestore

gdg-tangier / Vue Firestore

Licence: mit
☁️ Cloud Firestore binding in realtime with Vuejs

Programming Languages

javascript
184084 projects - #8 most used programming language
es6
455 projects

Projects that are alternatives of or similar to Vue Firestore

React Firestore
React components to fetch data from firestore using render props
Stars: ✭ 228 (-4.6%)
Mutual labels:  firebase, firestore
Flutter Keep
A note-taking app built with Flutter + Firebase
Stars: ✭ 238 (-0.42%)
Mutual labels:  firebase, firestore
Todo Vue
Code for YouTube series on building a Todo App in Vue.js
Stars: ✭ 199 (-16.74%)
Mutual labels:  firebase, firestore
Gqlify
[NOT MAINTAINED]An API integration framework using GraphQL
Stars: ✭ 182 (-23.85%)
Mutual labels:  firebase, firestore
Vuex Easy Firestore
Easy coupling of firestore and a vuex module. 2-way sync with 0 boilerplate!
Stars: ✭ 224 (-6.28%)
Mutual labels:  firebase, firestore
Node Firestore Backup
Google Firebase Firestore backup tool
Stars: ✭ 192 (-19.67%)
Mutual labels:  firebase, firestore
Fireadmin
Application for Managing Firebase Applications. Includes support for multiple environments and data migrations
Stars: ✭ 207 (-13.39%)
Mutual labels:  firebase, firestore
Firestore Simple
More simple, powerfull and TypeScript friendly Firestore wrapper.
Stars: ✭ 145 (-39.33%)
Mutual labels:  firebase, firestore
Canner
⚡️[NOT MAINTAINED] Content Management Framework creates custom CMS fast and easy. Support data sources such as Firebase/Firestore, GraphQL and Restful APIs.
Stars: ✭ 2,472 (+934.31%)
Mutual labels:  firebase, firestore
Reactfire
Hooks, Context Providers, and Components that make it easy to interact with Firebase.
Stars: ✭ 2,908 (+1116.74%)
Mutual labels:  firebase, firestore
Makeitso
This is the source code for Make It So, the sample app accompanying my blog post "Replicating the iOS Reminders App Using SwiftUI and Firebase"
Stars: ✭ 181 (-24.27%)
Mutual labels:  firebase, firestore
Iosched Ios
The Google I/O iOS app
Stars: ✭ 227 (-5.02%)
Mutual labels:  firebase, firestore
Firestore Cloud Functions Typescript
Firebase cloud functions in typescript with Firestore. Using a social network as example
Stars: ✭ 171 (-28.45%)
Mutual labels:  firebase, firestore
Expo Firebase Starter
🔥⚛️📱 Expo + Firebase Starter Kit
Stars: ✭ 199 (-16.74%)
Mutual labels:  firebase, firestore
Fireo
Google Cloud Firestore modern and simplest convenient ORM package in Python. FireO is specifically designed for the Google's Firestore
Stars: ✭ 163 (-31.8%)
Mutual labels:  firebase, firestore
Geoflutterfire
🔥GeoFlutterFire🔥 is an open-source library that allows you to store and query firestore documents based on their geographic location.
Stars: ✭ 207 (-13.39%)
Mutual labels:  firebase, firestore
Fluttergram
A fully functional Instagram clone written in Flutter using Firebase / Firestore
Stars: ✭ 1,944 (+713.39%)
Mutual labels:  firebase, firestore
Highlight Utils
My tools for converting, importing, and processing Kindle, Instapaper, and Safari Books highlights
Stars: ✭ 143 (-40.17%)
Mutual labels:  firebase, firestore
Nobullshit
A sample project entirely written in Kotlin. Backend/Frontend with Ktor and Android app.
Stars: ✭ 221 (-7.53%)
Mutual labels:  firebase, firestore
React Native Examples
A repo that contain React Native examples most related to tutorials I publish
Stars: ✭ 222 (-7.11%)
Mutual labels:  firebase, firestore

vue-firestore

Vue.js binding for firebase cloud firestore.

Prerequisites

Firebase ^7.6.1

Try it out: Demo

Installation

Globally (Browser)

vue-firestore will be installed automatically.

<!-- Vue -->   
<script src="https://unpkg.com/vue"></script>
<!-- Firebase -->   
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase.js"></script>
<!-- Firestore -->   
<script src="https://www.gstatic.com/firebasejs/5.3.1/firebase-firestore.js"></script>
<!-- vue-firestore -->   
<script src="https://unpkg.com/vue-firestore"></script>

<script>        
  // Firebase config.
  var config = {
        apiKey: "your-apik-ey",
        authDomain: "your-auth-domain",
        databaseURL: "your-database-url",
        projectId: "your-project-id",
        storageBucket: "your-storage-bucket",
        messagingSenderId: "your-messaing-sender-id"
      }

  // Initialize Firebase.
  firebase.initializeApp(config);
</script>

npm

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 two 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')
    }
  }
})

You can pass an object to the firestore() function.

As you may know, firestore source returns a promise, so you can handle it if it's resolved by resolve function or rejected by reject function, this case is really useful when we want to wait for data to be rendered and do some specific actions.

firestore () {
  return {
    persons: {
      // collection reference.
      ref: firestore.collection('persons'),
      // Bind the collection as an object if you would like to.
      objects: true,
      resolve: (data) => {
          // collection is resolved
      },
      reject: (err) => {
          // collection is rejected
      }
    }
  }
}

  1. Manually binding

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

...
mounted () {
  // Binding Collections
  this.$binding("users", firestore.collection("users"))
  .then((users) => {
    console.log(users) // => __ob__: Observer
  })

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

Vue firestore latest release supports binding collections as objects, you can bind the collection manually by this.$bindCollectionAsObject(key, source) or you can explicitly do that by adding {objects: true} to firestore() function, see the previous example above.

The normalized resutls of $bindCollectionAsObject:

{
    tjlAXoQ3VAoNiJcka9: {
        firstname: "Jhon",
        lastname: "Doe"
    },
    fb7AcoG3QAoCiJcKa9: {
        firstname: "Houssain",
        lastname: "Amrani"
    }
}

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"
    })
}

You can customize the name of the .key property by passing an option when initializing vue-firestore:

require('firebase/firestore')

Vue.use(VueFirestore, {
    key: 'id',         // the name of the property. Default is '.key'.
    enumerable: true  //  whether it is enumerable or not. Default is true.
})

This would allow you to do person.id instead of person['.key'].

More Resources

LICENSE

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].