API Documentation / vuefire

Module: vuefire

Interfaces

• DatabasePluginOptions
• DatabaseSnapshotSerializer
• FirestorePluginOptions
• UseCollectionOptions
• UseDatabaseRefOptions
• UseDocumentOptions
• VueFireAppCheckOptions
• VueFireAuthOptions
• VueFireAuthOptionsFromAuth
• VueFireModule
• VueFireOptions
• _RefDatabase

References

rtdbPlugin

Renames and re-exports databasePlugin

Type Aliases

FirebaseOption

Ƭ FirebaseOption: VueFirebaseObject | () => VueFirebaseObject

---

FirestoreOption

Ƭ FirestoreOption: VueFirestoreObject | () => VueFirestoreObject

---

UseListOptions

Ƭ UseListOptions<DataT>: UseDatabaseRefOptions<DataT>

Type parameters

Name	Type
DataT	unknown

---

UseObjectOptions

Ƭ UseObjectOptions<DataT>: UseDatabaseRefOptions<DataT>

Type parameters

Name	Type
DataT	unknown

---

VueDatabaseDocumentData

Ƭ VueDatabaseDocumentData<T>: null | T & { id: string }

Type used by default by the serialize option.

Type parameters

Name	Type
T	unknown

---

VueDatabaseQueryData

Ƭ VueDatabaseQueryData<T>: _Simplify<NonNullable<VueDatabaseDocumentData<T>>>[]

Same as VueDatabaseDocumentData but for a query.

Type parameters

Name	Type
T	unknown

---

VueFirebaseObject

Ƭ VueFirebaseObject: Record<string, Query | DatabaseReference>

---

VueFirestoreDocumentData

Ƭ VueFirestoreDocumentData<T>: null | T & { id: string }

Type used by default by the firestoreDefaultConverter.

Type parameters

Name	Type
T	DocumentData

---

VueFirestoreObject

Ƭ VueFirestoreObject: Record<string, _FirestoreDataSource>

---

VueFirestoreQueryData

Ƭ VueFirestoreQueryData<T>: _Simplify<NonNullable<VueFirestoreDocumentData<T>>>[]

Type parameters

Name	Type
T	DocumentData

Variables

devalueCustomParsers

• Const devalueCustomParsers: Object

Custom parsers for devalue to support Firestore Timestamp and GeoPoint on SSR.

Type declaration

Name	Type
GeoPoint	(data: { latitude: number ; longitude: number }) => GeoPoint
TimeStamp	(data: { nanoseconds: number ; seconds: number }) => Timestamp

---

devalueCustomStringifiers

• Const devalueCustomStringifiers: Object

Custom stringifier for devalue to support Firestore Timestamp and GeoPoint on SSR.

Type declaration

Name	Type
GeoPoint	(data: unknown) => false | { latitude: number ; longitude: number }
TimeStamp	(data: unknown) => false | { nanoseconds: number ; seconds: number }

---

firestoreDefaultConverter

• Const firestoreDefaultConverter: FirestoreDataConverter<VueFirestoreDocumentData>

Default converter for Firestore data. Can be overridden globally by setting globalFirestoreOptions.converter.

---

globalDatabaseOptions

• Const globalDatabaseOptions: _DatabaseRefOptionsWithDefaults

---

globalFirestoreOptions

• Const globalFirestoreOptions: _FirestoreRefOptionsWithDefaults

Global default options

Functions

VueFire

▸ VueFire(app, «destructured»): void

VueFire Vue plugin.

Parameters

Name	Type
app	App<any>
«destructured»	VueFireOptions

Returns

void

---

VueFireAppCheck

▸ VueFireAppCheck(options): (firebaseApp: FirebaseApp, app: App<any>) => void

VueFire AppCheck Module to be added to the VueFire Vue plugin options. This module is client only and shouldn't be added on server.

Parameters

Name	Type
options	VueFireAppCheckOptions

Returns

fn

▸ (firebaseApp, app): void

Parameters

Name	Type
firebaseApp	FirebaseApp
app	App<any>

Returns

void

Example

import { createApp } from 'vue'
import { VueFire, VueFireAppCheck } from 'vuefire'

const app = createApp(App)
app.use(VueFire, {
  modules: [VueFireAppCheck()],
})

---

VueFireAuth

▸ VueFireAuth(initialUser?): VueFireModule

VueFire Auth Module to be added to the VueFire Vue plugin options. This calls the VueFireAuthWithDependencies() with all the dependencies, increasing bundle size. Consider using VueFireAuthWithDependencies() instead to better control the bundle size.

Parameters

Name	Type	Description
initialUser?	_Nullable<User>	initial value of the user. used for SSR

Returns

VueFireModule

See

https://firebase.google.com/docs/auth/web/custom-dependencies

Example

import { createApp } from 'vue'
import { VueFire, VueFireAuth } from 'vuefire'

const app = createApp(App)
app.use(VueFire, {
 modules: [VueFireAuth()],
})

---

VueFireAuthOptionsFromAuth

▸ VueFireAuthOptionsFromAuth(options): VueFireModule

VueFire Auth Module to be added to the VueFire Vue plugin options. It accepts an auth instance rather than the dependencies. It allows manually calling emulators and other advanced use cases. Prefer using VueFireAuthWithDependencies() and VueFireAuth() for most use cases.

Parameters

Name	Type	Description
options	VueFireAuthOptionsFromAuth	auth instance and initial user

Returns

VueFireModule

---

VueFireAuthWithDependencies

▸ VueFireAuthWithDependencies(options): VueFireModule

VueFire Auth Module to be added to the VueFire Vue plugin options. It accepts dependencies to pass to initializeAuth() to better control the bundle size.

Parameters

Name	Type	Description
options	VueFireAuthOptions	user and options to pass to initializeAuth().

Returns

VueFireModule

---

VueFireDatabaseOptionsAPI

▸ VueFireDatabaseOptionsAPI(pluginOptions?): (firebaseApp: FirebaseApp, app: App<any>) => void

VueFire Database Module to be added to the VueFire Vue plugin options. If you exclusively use the Composition API (e.g. useDatabaseObject() and useDatabaseList()), you should not add it.

Parameters

Name	Type
pluginOptions?	DatabasePluginOptions

Returns

fn

▸ (firebaseApp, app): void

Parameters

Name	Type
firebaseApp	FirebaseApp
app	App<any>

Returns

void

Example

import { createApp } from 'vue'
import { VueFire, VueFireDatabaseOptionsAPI } from 'vuefire'

const app = createApp(App)
app.use(VueFire, {
  modules: [VueFireDatabaseOptionsAPI()],
})

---

VueFireFirestoreOptionsAPI

▸ VueFireFirestoreOptionsAPI(pluginOptions?): (firebaseApp: FirebaseApp, app: App<any>) => void

VueFire Firestore Module to be added to the VueFire Vue plugin options.

Parameters

Name	Type
pluginOptions?	FirestorePluginOptions

Returns

fn

▸ (firebaseApp, app): void

Parameters

Name	Type
firebaseApp	FirebaseApp
app	App<any>

Returns

void

Example

import { createApp } from 'vue'
import { VueFire, VueFireFirestoreOptionsAPI } from 'vuefire'

const app = createApp(App)
app.use(VueFire, {
  modules: [VueFireFirestoreOptionsAPI()],
})

---

databaseDefaultSerializer

▸ databaseDefaultSerializer(snapshot): VueDatabaseDocumentData<unknown>

Convert firebase Database snapshot of a ref that exists into a bindable data record.

Parameters

Name	Type
snapshot	DataSnapshot

Returns

VueDatabaseDocumentData<unknown>

---

databasePlugin

▸ databasePlugin(app, pluginOptions?, firebaseApp?): void

Install this plugin if you want to add $databaseBind and $databaseUnbind functions. Note this plugin is only necessary if you use the Options API. If you exclusively use the Composition API (e.g. useDatabaseObject() and useDatabaseList()), you should not add it.

Parameters

Name	Type
app	App<any>
pluginOptions?	DatabasePluginOptions
firebaseApp?	FirebaseApp

Returns

void

Deprecated

Use VueFire and VueFireDatabaseOptionsAPI with the modules option instead.

---

firestorePlugin

▸ firestorePlugin(app, pluginOptions?, firebaseApp?): void

Install this plugin to add $firestoreBind and $firestoreUnbind functions. Note this plugin is not necessary if you exclusively use the Composition API (useDocument() and useCollection()).

Parameters

Name	Type
app	App<any>
pluginOptions?	FirestorePluginOptions
firebaseApp?	FirebaseApp

Returns

void

Deprecated

Use VueFire and VueFireFirestoreOptionsAPI with the modules option instead.b

---

getCurrentUser

▸ getCurrentUser(name?): Promise<_Nullable<User>>

Returns a promise that resolves the current user once the user is loaded. Must be called after the firebase app is initialized.

Parameters

Name	Type	Description
name?	string	name of the firebase application

Returns

Promise<_Nullable<User>>

---

updateCurrentUserProfile

▸ updateCurrentUserProfile(profile): Promise<void>

Updates the current user profile and updates the current user state. This function internally calls updateProfile() from 'firebase/auth' and then updates the current user state.

Parameters

Name	Type	Description
profile	Object	the new profile information
profile.displayName?	_Nullable<string>	-
profile.photoURL?	_Nullable<string>	-

Returns

Promise<void>

---

useAppCheck

▸ useAppCheck(name?): AppCheck

Retrieves the Firebase App Check instance.

Parameters

Name	Type	Description
name?	string	name of the application

Returns

AppCheck

---

useAppCheckToken

▸ useAppCheckToken(): Ref<undefined | string>

The current app-check token as a Ref. Note this ref is always undefined on the server.

Returns

Ref<undefined | string>

---

useCollection

▸ useCollection<R>(collectionRef, options?): _RefFirestore<_InferReferenceType<R>[]>

Creates a reactive collection (usually an array) of documents from a collection ref or a query from Firestore. Extracts the type of the query or converter.

Type parameters

Name	Type
R	extends Query<unknown, DocumentData> | CollectionReference<unknown, DocumentData>

Parameters

Name	Type	Description
collectionRef	MaybeRefOrGetter<_Nullable<R>>	query or collection
options?	UseCollectionOptions<_InferReferenceType<R>[]>	optional options

Returns

_RefFirestore<_InferReferenceType<R>[]>

▸ useCollection<T>(collectionRef, options?): _RefFirestore<VueFirestoreQueryData<T>>

Creates a reactive collection (usually an array) of documents from a collection ref or a query from Firestore. Accepts a generic to enforce the type of the returned Ref. Note you can (and probably should) use .withConverter() to have stricter type safe version of a collection reference.

Type parameters

Name
T

Parameters

Name	Type	Description
collectionRef	MaybeRefOrGetter<_Nullable<Query<unknown, DocumentData> | CollectionReference<unknown, DocumentData>>>	query or collection
options?	UseCollectionOptions<T[]>	optional options

Returns

_RefFirestore<VueFirestoreQueryData<T>>

---

useCurrentUser

▸ useCurrentUser(name?): Ref<_Nullable<User>>

Returns a reactive variable of the currently authenticated user in the firebase app. The ref is null if no user is authenticated or when the user logs out. The ref is undefined until the user is initially loaded.

Parameters

Name	Type	Description
name?	string	name of the application

Returns

Ref<_Nullable<User>>

---

useDatabase

▸ useDatabase(name?): Database

Retrieves the Database instance.

Parameters

Name	Type	Description
name?	string	name of the application

Returns

Database

the Database instance

---

useDatabaseList

▸ useDatabaseList<T>(reference, options?): _RefDatabase<VueDatabaseQueryData<T>>

Creates a reactive variable connected to the database as an array. Each element in the array will contain an id property. Note that if you override the serialize option, it should also set an id property in order for this to work.

Type parameters

Name	Type
T	unknown

Parameters

Name	Type	Description
reference	MaybeRefOrGetter<_Nullable<Query | DatabaseReference>>	Reference or query to the database
options?	UseListOptions<T>	optional options

Returns

_RefDatabase<VueDatabaseQueryData<T>>

---

useDatabaseObject

▸ useDatabaseObject<T>(reference, options?): _RefDatabase<VueDatabaseDocumentData<T> | undefined>

Creates a reactive variable connected to the database as an object. If the reference is a primitive, it will be converted to an object containing a $value property with the primitive value and an id property with the reference's key.

Type parameters

Name	Type
T	unknown

Parameters

Name	Type	Description
reference	MaybeRefOrGetter<_Nullable<DatabaseReference>>	Reference or query to the database
options?	UseObjectOptions<T>	optional options

Returns

_RefDatabase<VueDatabaseDocumentData<T> | undefined>

---

useDocument

▸ useDocument<R>(documentRef, options?): _RefFirestore<_InferReferenceType<R> | undefined>

Creates a reactive document from a document ref from Firestore. Automatically extracts the type of the converter or the document.

Type parameters

Name	Type
R	extends DocumentReference<unknown, DocumentData>

Parameters

Name	Type	Description
documentRef	MaybeRefOrGetter<_Nullable<R>>	document reference
options?	UseDocumentOptions<_InferReferenceType<R>>	optional options

Returns

_RefFirestore<_InferReferenceType<R> | undefined>

▸ useDocument<T>(documentRef, options?): _RefFirestore<VueFirestoreDocumentData<T> | undefined>

Creates a reactive collection (usually an array) of documents from a collection ref or a query from Firestore. Accepts a generic to enforce the type of the returned Ref. Note you can (and probably should) use .withConverter() to have stricter type safe version of a collection reference.

Type parameters

Name
T

Parameters

Name	Type	Description
documentRef	MaybeRefOrGetter<_Nullable<DocumentReference<DocumentData, DocumentData>>>	query or collection
options?	UseDocumentOptions<T>	optional options

Returns

_RefFirestore<VueFirestoreDocumentData<T> | undefined>

---

useFirebaseApp

▸ useFirebaseApp(name?): FirebaseApp

Gets the firebase app instance.

Parameters

Name	Type	Description
name?	string	optional firebase app name

Returns

FirebaseApp

the firebase app

---

useFirebaseAuth

▸ useFirebaseAuth(): Auth | null

Retrieves the Firebase Auth instance. Returns null on the server. When using this function on the client in TypeScript, you can force the type with useFirebaseAuth()!.

Returns

Auth | null

the Auth instance

---

useFirebaseStorage

▸ useFirebaseStorage(name?): FirebaseStorage

Retrieves the Storage instance.

Parameters

Name	Type	Description
name?	string	name of the application

Returns

FirebaseStorage

the Database instance

---

useFirestore

▸ useFirestore(name?): Firestore

Retrieves the Firestore instance.

Parameters

Name	Type	Description
name?	string	name of the application

Returns

Firestore

the Firestore instance

---

useIsCurrentUserLoaded

▸ useIsCurrentUserLoaded(name?): ComputedRef<boolean>

Helper that returns a computed boolean that becomes true as soon as the current user is no longer undefined. Note this doesn't ensure the user is logged in, only if the initial signing process has run.

Parameters

Name	Type	Description
name?	string	name of the application

Returns

ComputedRef<boolean>

---

useList

▸ useList<T>(reference, options?): _RefDatabase<VueDatabaseQueryData<T>>

Type parameters

Name	Type
T	unknown

Parameters

Name	Type
reference	MaybeRefOrGetter<_Nullable<Query | DatabaseReference>>
options?	UseListOptions<T>

Returns

_RefDatabase<VueDatabaseQueryData<T>>

Deprecated

use useDatabaseList() instead

---

useObject

▸ useObject<T>(reference, options?): _RefDatabase<VueDatabaseDocumentData<T> | undefined>

Type parameters

Name	Type
T	unknown

Parameters

Name	Type
reference	MaybeRefOrGetter<_Nullable<DatabaseReference>>
options?	UseObjectOptions<T>

Returns

_RefDatabase<VueDatabaseDocumentData<T> | undefined>

Deprecated

use useDatabaseObject() instead

---

usePendingPromises

▸ usePendingPromises(app?): Promise<readonly [string, unknown][]>

Allows awaiting for all pending data sources. Useful to wait for SSR

Parameters

Name	Type	Description
app?	FirebaseApp	the firebase app

Returns

Promise<readonly [string, unknown][]>

• a Promise that resolves with an array of all the resolved pending promises

---

useSSRInitialState

▸ useSSRInitialState(initialState, firebaseApp): SSRStore

Allows getting the initial state set during SSR on the client.

Parameters

Name	Type	Description
initialState	undefined | SSRStore	the initial state to set for the firebase app during SSR. Pass undefined to not set it
firebaseApp	FirebaseApp	the firebase app to get the initial state for

Returns

SSRStore

the initial states for the current firebaseApp

---

useStorage

▸ useStorage(name?): FirebaseStorage

Parameters

Name	Type
name?	string

Returns

FirebaseStorage

Deprecated

use useFirebaseStorage() instead

---

useStorageFile

▸ useStorageFile(storageRef): Object

Reactive information (url, metadata) of a StorageReference. Allows updating and deleting the storage object.

Parameters

Name	Type	Description
storageRef	MaybeRefOrGetter<_Nullable<StorageReference>>	StorageReference

Returns

Object

Name	Type
metadata	ShallowRef<undefined | null | FullMetadata>
refresh	() => Promise<[null | string, null | FullMetadata]>
snapshot	ShallowRef<undefined | null | UploadTaskSnapshot>
updateMetadata	(newMetadata: SettableMetadata) => Promise<null | FullMetadata>
upload	(newData: Blob | Uint8Array | ArrayBuffer, newMetadata?: UploadMetadata) => undefined | Promise<unknown>
uploadError	ShallowRef<undefined | null | StorageError>
uploadProgress	ComputedRef<null | number>
uploadTask	ShallowRef<undefined | null | UploadTask>
url	Ref<undefined | null | string>

---

useStorageFileMetadata

▸ useStorageFileMetadata(storageRef): Object

Returns a reactive version of the metadata of a StorageReference. Updates automatically if the StorageReference changes.

Parameters

Name	Type	Description
storageRef	MaybeRefOrGetter<_Nullable<StorageReference>>	StorageReference

Returns

Object

Name	Type
metadata	ShallowRef<undefined | null | FullMetadata>
promise	ShallowRef<Promise<null | FullMetadata>>
refresh	() => Promise<null | FullMetadata>
update	(newMetadata: SettableMetadata) => Promise<null | FullMetadata>

---

useStorageFileUrl

▸ useStorageFileUrl(storageRef): Object

Retrieves a reactive download URL of a StorageReference. Updates automatically if the StorageReference changes.

Parameters

Name	Type	Description
storageRef	MaybeRefOrGetter<_Nullable<StorageReference>>	StorageReference

Returns

Object

Name	Type
promise	ShallowRef<Promise<null | string>>
refresh	() => Promise<null | string>
url	Ref<undefined | null | string>

---

useStorageMetadata

▸ useStorageMetadata(storageRef): Object

Parameters

Name	Type
storageRef	MaybeRefOrGetter<_Nullable<StorageReference>>

Returns

Object

Name	Type
metadata	ShallowRef<undefined | null | FullMetadata>
promise	ShallowRef<Promise<null | FullMetadata>>
refresh	() => Promise<null | FullMetadata>
update	(newMetadata: SettableMetadata) => Promise<null | FullMetadata>

Deprecated

use useStorageFileMetadata() instead

---

useStorageObject

▸ useStorageObject(storageRef): Object

Parameters

Name	Type
storageRef	MaybeRefOrGetter<_Nullable<StorageReference>>

Returns

Object

Name	Type
metadata	ShallowRef<undefined | null | FullMetadata>
refresh	() => Promise<[null | string, null | FullMetadata]>
snapshot	ShallowRef<undefined | null | UploadTaskSnapshot>
updateMetadata	(newMetadata: SettableMetadata) => Promise<null | FullMetadata>
upload	(newData: Blob | Uint8Array | ArrayBuffer, newMetadata?: UploadMetadata) => undefined | Promise<unknown>
uploadError	ShallowRef<undefined | null | StorageError>
uploadProgress	ComputedRef<null | number>
uploadTask	ShallowRef<undefined | null | UploadTask>
url	Ref<undefined | null | string>

Deprecated

use useStorageFile() instead

---

useStorageUrl

▸ useStorageUrl(storageRef): Object

Parameters

Name	Type
storageRef	MaybeRefOrGetter<_Nullable<StorageReference>>

Returns

Object

Name	Type
promise	ShallowRef<Promise<null | string>>
refresh	() => Promise<null | string>
url	Ref<undefined | null | string>

Deprecated

use useStorageFileUrl() instead