https://github.com/mesqueeb/vuex-easy-firestore
Easy coupling of firestore and a vuex module. 2-way sync with 0 boilerplate!
https://github.com/mesqueeb/vuex-easy-firestore
firebase firebase-cloud-firestore firebase-firestore firestore google-firebase store sync vue vuejs vuex vuex-store
Last synced: about 1 month ago
JSON representation
Easy coupling of firestore and a vuex module. 2-way sync with 0 boilerplate!
- Host: GitHub
- URL: https://github.com/mesqueeb/vuex-easy-firestore
- Owner: mesqueeb
- License: mit
- Created: 2018-06-18T06:42:26.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2025-02-26T04:13:17.000Z (2 months ago)
- Last Synced: 2025-03-31T20:11:15.266Z (about 1 month ago)
- Topics: firebase, firebase-cloud-firestore, firebase-firestore, firestore, google-firebase, store, sync, vue, vuejs, vuex, vuex-store
- Language: JavaScript
- Homepage: https://mesqueeb.github.io/vuex-easy-firestore
- Size: 4.05 MB
- Stars: 235
- Watchers: 9
- Forks: 27
- Open Issues: 79
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Vuex Easy Firestore 🔥
In just 4 lines of code, get your vuex module in complete 2-way sync with firestore:
```js
const userModule = {
firestorePath: 'users/{userId}/data',
firestoreRefType: 'collection', // or 'doc'
moduleName: 'user',
statePropName: 'docs',
// the rest of your module here
}
// add userModule as vuex plugin wrapped in vuex-easy-firestore
```
and Alakazam! Now you have a vuex module called `user` with `state: {docs: {}}`.
All firestore documents in your collection will be added with the doc's id as key inside `docs` in your state.
Now you just update and add docs with `dispatch('user/set', newItem)` and forget about the rest!
Other features include hooks, fillables (limit props to sync), default values (add props on sync), a fetch function and much more...
[Installation and setup](https://mesqueeb.github.io/vuex-easy-firestore/setup.html#installation)　 →
# Motivation
I didn't like writing an entire an API wrapper from scratch for firestore every single project. If only a vuex module could be in perfect sync with firestore without having to code all the boilerplate yourself...
And that's how Vuex Easy Firestore was born.
# Documentation
See the all new documentation made with VuePress!
**[Full documentation](https://mesqueeb.github.io/vuex-easy-firestore)**
# Support
If you like what I built, you can say thanks by buying me a coffee! :)
Thank you so much!! Every little bit helps.