useFirestore
Reactive Firestore binding. Making it straightforward to always keep your local data in sync with remotes databases. available in add-on @vueuse/firebase
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'))
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 })
const todos = useFirestore(db.collection('todos'), undefined, { autoDispose: false })
or use createGlobalStatefrom the core package
// store.js
import { createGlobalState } from '@vueuse/core'
import { useFirestore } from '@vueuse/firebase/useFirestore'
export const useTodos = createGlobalState(
() => useFirestore(db.collection('todos')),
)
// 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 }
},
}
// app.js
import { useTodos } from './store'
export default {
setup() {
const todos = useTodos()
return { todos }
},
}
Type Declarations
Show Type Declarations
export interface FirestoreOptions {
errorHandler?: (err: Error) => void
autoDispose?: boolean
}
export declare type FirebaseDocRef<T> =
| firebase.firestore.Query<T>
| firebase.firestore.DocumentReference<T>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.DocumentReference<T>,
initialValue: T,
options?: FirestoreOptions
): Ref<T | null>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.Query<T>,
initialValue: T[],
options?: FirestoreOptions
): Ref<T[]>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.DocumentReference<T>,
initialValue?: T | undefined,
options?: FirestoreOptions
): Ref<T | undefined | null>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.Query<T>,
initialValue?: T[],
options?: FirestoreOptions
): Ref<T[] | undefined>
export interface FirestoreOptions {
errorHandler?: (err: Error) => void
autoDispose?: boolean
}
export declare type FirebaseDocRef<T> =
| firebase.firestore.Query<T>
| firebase.firestore.DocumentReference<T>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.DocumentReference<T>,
initialValue: T,
options?: FirestoreOptions
): Ref<T | null>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.Query<T>,
initialValue: T[],
options?: FirestoreOptions
): Ref<T[]>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.DocumentReference<T>,
initialValue?: T | undefined,
options?: FirestoreOptions
): Ref<T | undefined | null>
export declare function useFirestore<T extends firebase.firestore.DocumentData>(
docRef: firebase.firestore.Query<T>,
initialValue?: T[],
options?: FirestoreOptions
): Ref<T[] | undefined>
Source
Contributors
Anthony Fu
Antério Vieira
Alex Kozack
Rodolfo Román
Matthias Stiller
Phil Li