index.md

category
@Firebase

useFirestore

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

Usage

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

const app = initializeApp({ projectId: 'MY PROJECT ID' })
const db = getFirestore(app)

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 }
  },
}