Getting Started

Before using Vuexfire, make sure you have a Firebase account and a project setup by following the instructions at Create a Cloud Firestore project (opens new window). Keep in mind there are two different databases: RTDB and Cloud Firestore (often referenced as Firestore). If you have never read about them, you should first read Choose a Database (opens new window) in Firebase documentation. Vuexfire supports both versions although you probably will only use one of them in a given project. Througout the docs you will often find snipets showing both, RTDB() and Firestore () examples. Click on them to switch code samples.

Installation

In order to get started make sure to install the latest version of vuexfire as well as firebase:

yarn add vuexfire firebase
# or
npm install vuexfire firebase

WARNING

• Vuexfire requires Firebase JS SDK >= 4.

Adding mutations

In order to use Vuexfire, you must add the mutations exported by the package at the root of your store, and only there. Do not add them in any Vuex module:

import { vuexfireMutations } from 'vuexfire'
import Vuex from 'vuex'

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

This will add some mutations needed to keep your store state in sync with the remote database.

Easy access to Firebase database

You also need to get a database instance from firebase. This can be put into a db.js file in your project to conveniently import it anywhere:

import firebase from 'firebase/app'
import 'firebase/firestore'

// Get a Firestore instance
export const db = firebase
  .initializeApp({ projectId: 'MY PROJECT ID' })
  .firestore()

// Export types that exists in Firestore
// This is not always necessary, but it's used in other examples
const { TimeStamp, GeoPoint } = firebase.firestore
export { TimeStamp, GeoPoint }

// if using Firebase JS SDK < 5.8.0
db.settings({ timestampsInSnapshots: true })

Now we are ready to bind our first reference and see it update live!