Simple tutorial on VuexFire for Vue.js

In this tutorial I will explain how to sync your firestore database with your state, manged by Vuex in your Vue app using VuexFire.

So what is VueFire/VuexFire?

Vuexfire is a small and pragmatic solution to create realtime bindings between a Firebase RTDB or a Firebase Cloudstore and your Vuex store. Making it straightforward to always keep your store state in sync with remote databases.

Why use VuexFire

What VuexFire allows us to do is to keep our Firestore database in sync with the state of our app. For example, lets say you want to delete a document from you firestore collection it involves these steps:

• Create a function to delete the document from the firestore database.
• Find the deleted data in your Vuex state.
• Update the state by also deleting the same data from Vuex state.

Using VuexFire you can skip the last two steps as it syncs your state with the firestore database i.e. if you delete a document from the firestore your Vuex state will automatically get updated without you trying to find the data and deleting it yourself, COOL RIGHT!

Lets get started!

First you will need to create a cloud firestore database with your collections.

For example I have created a users collection which holds two documents, each document contains the users name and email.

Now we need to register a web app on firebase so that we can use its firebaseConfig object to initialize our firebase app.

Lets Initialize our app.

 // src/firestoreConfig.js
import firebase from 'firebase/app'
import 'firebase/firestore'

var firebaseConfig = {
    apiKey: "AIzaSyCMRJIUKlq6pWCaXm5xPX4r12kK7WnlAs4",
    authDomain: "vue-crud-example-ea8de.firebaseapp.com",
    databaseURL: "https://vue-crud-example-ea8de.firebaseio.com",
    projectId: "vue-crud-example-ea8de",
    storageBucket: "vue-crud-example-ea8de.appspot.com",
    messagingSenderId: "176596962280",
    appId: "1:176596962280:web:80ad308520df595082325d"
  };
export const db = firebase
  .initializeApp(firebaseConfig)
  .firestore()

Note your firebaseConfig object will be different.

Once firestore is initialized in your Vue app we can now install VuexFire.

Getting started with VuexFire

To install VuexFire run the following commands in your terminal. You need the node package manger for this or you can install it using yarn.

yarn add vuexfire firebase
# or
npm install vuexfire firebase

Lets add Vuexfire to the your Vuex state.

• Import vuexfireMutations from VuexFire

import { vuexfireMutations } from 'vuexfire'

• Add this mutation to your Vuex state mutations

import Vuex from 'vuex'

const store = new Vuex.Store({
  mutations: {
    // other mutations
    ...vuexfireMutations,
  },
})

Done! VuexFire is now added to your Vuex state.

Lets sync the firestore database with your Vuex state

We can do this by adding the following action bindUsersin our store.

// store/store.js
import { vuexfireMutations, firestoreAction } from "vuexfire"
const store = new Vuex.Store({
  state: {
    users: []
  },
  mutations: {
    ...vuexfireMutations
  },
  modules: {
    auth
  },
  actions: {
    bindUsers: firestoreAction(({ bindFirestoreRef }) => {
      return bindFirestoreRef("users", db.collection("users"));
    })
  }
});

This action gets the users collection from the firestore database and adds it to state.users array.

Now your state is synced with the firestore database.

The state.users array will be loaded with the data like so:

[
  {
    name: "John Doe",
    email: "john@gmail.com"
  },
  {
    name: "Mary Jane",
    email: "mary@gmail.com"
  }
]

Now you can use this state.users array anywhere in your app using Vuex getters.

You can sync multiple firestore collections to your state by adding more actions!

The Advantages of using VuexFire

Now lets say you want to add a user to the firestore collection of users and it gets automatically gets displayed in one of your Vue Components via the Vuex state.

Simple!

You just add the user using normal firebase JS SDK functions.

For example I want to add a user to my users collection:

import db from '@/firestoreConfig';
addUser function (name, email) {
db.collection("users")
  .add({
    name,
    email,
  })
}

This function will add a new user document into the users collection.

What to do for updating the state in your Vue app? Nothing!

VuexFire will automatically sync and add the new user to the state.users in your store. This is what is amazing about VuexFire it automatically syncs all the firestore data to your Vuex Store, no new code required!

Same goes for updating and deleting from the firestore, VuexFire will automatically sync it for you.

Now, Try and use it in your own Vue app!