# 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. 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 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!