Getting Started

Before using Vuefire, 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. Vuefire supports both versions although you probably will only use one of them in a given project. Throughout the docs you will often find snippets 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 vuefire as well as firebase:

yarn add vuefire firebase
# or
npm install vuefire firebase

WARNING

• Vuefire requires Firebase JS SDK >= 4.

Plugin

Vuefire must be installed as a Vue plugin. Make sure to install the right one:

• Install firestorePlugin if you need to use Cloud Firestore (often abreviated Firestore)
• Install rtdbPlugin if you need to use the original RTDB (Real Time Database)
• If you need to use both, check Using RTDB and Firestore together

import Vue from 'vue'
import { firestorePlugin } from 'vuefire'

Vue.use(firestorePlugin)

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!