How to easily connect Vuex to Firestore 🔥

If you are like me, you love building simple web apps and websites with VueJS, and if you’ve played around with Google Firebase before, I’m sure you can agree:

- Vuex is great to manage your data in a VueJS app.
- Cloud Firestore is a great database for Google Firebase.

However, I found myself re-writing the connection between Vuex ⇔ Firestore for every single app I made. That’s when I though:

What if Vuex could be in sync with Firestore automatically? Why couldn’t this be a simple feature or plugin, re-usable for any kind of project?

That’s why I made Vuex Easy Firestore 🔥
→ Easy coupling of firestore and vuex: 2-way sync with 0 boilerplate!

What is the current problem?

Let’s immidiately show some code examples to explain what vuex-easy-firestore solves.

Say you have a Pokémon app 😃 and you have a pokeDex module like so:

const pokeDex = {
  state: {
    pokemon: {
     ‘001’: {name: ‘Bulbasaur’, seen: false, caught: false}
    }
  }
}
const store = {
  modules: { pokeDex }
}

That was the easy part, set up a simple Vuex Module.
The problem is now you have to go and write your actual logic:

• actions and mutations for adding pokemon
• the same for updating values
• syncing each time to Firestore
• loading all pokemon from Firestore when the user opens the app

Writing all this boilerplate is not that of a problem, right? But you see, you have to do this every single time! For any app you make, for multiple modules, for different scenarios. Not to start talking about testing for bugs in all kinds of use cases…

It’s a lot of time you spend on infrastructure. NOT creating your actual app, but just getting the sync right.

How can this be solved?

What if I told you that you get all those features for adding/updating data and having everything synced to Firestore automatically!

That is vuex-easy-firestore

I created it with a simple goal: minimal setup for automatic 2-way sync

As per the example below, just add 4 lines with info how to connect Vuex to Firestore:

const pokeDex = {
  firestorePath: ‘users/{userId}/pokeDex’,
  firestoreRefType: ‘collection’,
  moduleName: ‘pokeDex’,
  statePropName: ‘pokemon’,
  // your state
  state: {
    pokemon: {
      ‘001’: {name: ‘Bulbasaur’, seen: false, caught: false}
    }
  }
}

This is enough to have complete auto sync! Vuex-easy-firestore will load your data from the server at the `firestorePath` and add it to your vuex module in `store[moduleName][statePropName]`.

You will also have auto-generated actions to add/edit/delete data!

Let’s add a Pokémon:

const newPokemon = {name: ‘Squirtle’}
dispatch(‘pokeDex/insert’, newPokemon)

Vuex-easy-firestore will automatically (1) attach an id (2) add the item to the state via mutation (3) sync to Firestore.

Besides `insert` you can also use:

・`patch` to edit data. Just pass an `id` as well.
・ `set` will either edit or add, it will check if the item exists or not.
・`delete` and pass just the `id`.

And of course other modules can be synced with other Firestore paths just as easy!

Wait, what’s so great about this all?

Here are a couple of features I worked hard on and hope will be helpful:

• 2-way sync which automatically adds your docs from the server into your Vuex module & syncs changes back
• It doesn’t matter how much you `patch` or `insert`, vuex-easy-firestore automatically creates batches to optimise API call amount
• Setup hooks before/after edits
• Filters to define which documents are loaded upon opening the page
• Action to fetch & add other/more docs with the same path (with other filters)
• Automatic `created_at`, `updated_at`, `created_by`, `updated_by` fields
• Set fillables/guard to prevent certain props from being synced

And much more…

What are you waiting for? Go try it out and let me know what you think!! See the full documentation here.

One more thing…

Finally let me share one more feature, it’s one of my favourites. 😊

We all face the problem where we expect a value on a document from the database, but it’s not there. For example when you added a new feature that saves new data, older users’ documents won’t have that data.

With vuex-easy-firestore you can set default values that get added to documents upon inserting, but also after being retrieved from the server.

defaultValues: {
  newProp: ‘’
}

Defining these `defaultValues` in the vuex-easy-firestore config will add the property `newProp` on every single doc retrieved from the server. So you have no Vuejs reactive problems, where a value is expected but not there.

Three claps for default values! 👏 🙌 👏

Thanks for sticking with me to the end! Let me know what you think about it. I hope I can make at least af few people’s life easier with this.

・Github ⭐️
・Documentation 📃
・My Twitter: @mesqueeb

I’m also open to any suggestions and feature requests! Open an issue on Github or tweet me. 👍

Photo by Johannes Groll on Unsplash