index.md

category
@Firebase

useFirestore

Reactive Firestore binding. Making it straightforward to always keep your local data in sync with remotes databases.

Usage

import firebase from 'firebase/app'
import 'firebase/firestore'
import { useFirestore } from '@vueuse/firebase/useFirestore'

const db = firebase.initializeApp({ projectId: 'MY PROJECT ID' }).firestore()

const todos = useFirestore(db.collection('todos'))

// or for doc reference
const user = useFirestore(db.collection('users').doc('my-user-id'))

Share across instances

You can reuse the db reference by passing autoDispose: false

const todos = useFirestore(db.collection('todos'), undefined, { autoDispose: false })

or use createGlobalState from the core package

// store.js
import { createGlobalState } from '@vueuse/core'
import { useFirestore } from '@vueuse/firebase/useFirestore'

export const useTodos = createGlobalState(
  () => useFirestore(db.collection('todos')),
)

// app.js
import { useTodos } from './store'

export default {
  setup() {
    const todos = useTodos()
    return { todos }
  },
}