Vuex Easy Firestore 🔥

Easy coupling of firestore and vuex. 2-way sync with 0 boilerplate!

Get Started →

Simplicity First

Minimal setup to get a vuex-module synced with Firestore automatically.

Powerful

Easy to use features include filtering, hooks, default values, automatic Firestore Timestamp conversion & much more.

Performant

Automatic 2-way sync is fully optimised through api call batches.

Overview

In just 4 lines of code, get your vuex module in complete 2-way sync with firestore:

const userDataModule = {
  firestorePath: 'users/{userId}/data',
  firestoreRefType: 'collection', // or 'doc'
  moduleName: 'userData',
  statePropName: 'docs',
  // the rest of your module here
}
// add userDataModule as vuex plugin wrapped in vuex-easy-firestore

and Alakazam! Now you have a vuex module called userData 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('userData/set', newItem) and forget about the rest!

Features

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.

Installation and setup →

Support

If you like what I built, you can say thanks by buying me a coffee! 😃

Buy me a coffeeBuy me a coffee

Thank you so much!! Every little bit helps.