VueFireAPI Documentation
API Documentation
Interfaces
- DatabasePluginOptions
- DatabaseSnapshotSerializer
- FirestorePluginOptions
- UseCollectionOptions
- UseDatabaseRefOptions
- UseDocumentOptions
- VueFireAppCheckOptions
- VueFireOptions
- _RefDatabase
- _RefFirestore
References
rtdbPlugin
Renames and re-exports databasePlugin
Type Aliases
FirebaseOption
Ƭ FirebaseOption: VueFirebaseObject | () => VueFirebaseObject
FirestoreOption
Ƭ FirestoreOption: VueFirestoreObject | () => VueFirestoreObject
UseListOptions
Ƭ UseListOptions: UseDatabaseRefOptions
UseObjectOptions
Ƭ UseObjectOptions: UseDatabaseRefOptions
VueDatabaseDocumentData
Ƭ VueDatabaseDocumentData<T>: null | T & { id: string }
Type used by default by the serialize option.
Type parameters
| Name | Type |
|---|---|
T | unknown |
VueDatabaseQueryData
Ƭ VueDatabaseQueryData<T>: 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>: Exclude<VueFirestoreDocumentData<T>, null>[]
Type parameters
| Name | Type |
|---|---|
T | DocumentData |
Variables
firestoreDefaultConverter
• Const firestoreDefaultConverter: FirestoreDataConverter<VueFirestoreDocumentData>
Default converter for Firestore data. Can be overridden by setting the
globalDatabaseOptions
• Const globalDatabaseOptions: _DatabaseRefOptionsWithDefaults
globalFirestoreOptions
• Const globalFirestoreOptions: _FirestoreRefOptionsWithDefaults
Global default options
Functions
VueFire
▸ VueFire(app, __namedParameters): void
VueFire Vue plugin.
Parameters
| Name | Type |
|---|---|
app | App<any> |
__namedParameters | VueFireOptions |
Returns
void
VueFireAppCheck
▸ VueFireAppCheck(options): (firebaseApp: FirebaseApp, app: App<any>) => void
VueFire AppCheck Module to be added to the VueFire Vue plugin options.
Example
ts
import { createApp } from 'vue'
import { VueFire, VueFireAppCheck } from 'vuefire'
const app = createApp(App)
app.use(VueFire, {
modules: [VueFireAppCheck()],
})
Parameters
| Name | Type |
|---|---|
options | VueFireAppCheckOptions |
Returns
fn
▸ (firebaseApp, app): void
Parameters
| Name | Type |
|---|---|
firebaseApp | FirebaseApp |
app | App<any> |
Returns
void
VueFireAuth
▸ VueFireAuth(_app?): (firebaseApp: FirebaseApp, app: App<any>) => void
VueFire Auth Module to be added to the VueFire Vue plugin options.
Example
ts
import { createApp } from 'vue'
import { VueFire, VueFireAuth } from 'vuefire'
const app = createApp(App)
app.use(VueFire, {
modules: [VueFireAuth()],
})
Parameters
| Name | Type |
|---|---|
_app? | undefined |
Returns
fn
▸ (firebaseApp, app): void
Parameters
| Name | Type |
|---|---|
firebaseApp | FirebaseApp |
app | App<any> |
Returns
void
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. useObject() and useList()), you should not add it.
Example
ts
import { createApp } from 'vue'
import { VueFire, VueFireDatabaseOptionsAPI } from 'vuefire'
const app = createApp(App)
app.use(VueFire, {
modules: [VueFireDatabaseOptionsAPI()],
})
Parameters
| Name | Type |
|---|---|
pluginOptions? | DatabasePluginOptions |
Returns
fn
▸ (firebaseApp, app): void
Parameters
| Name | Type |
|---|---|
firebaseApp | FirebaseApp |
app | App<any> |
Returns
void
VueFireFirestoreOptionsAPI
▸ VueFireFirestoreOptionsAPI(pluginOptions?): (firebaseApp: FirebaseApp, app: App<any>) => void
VueFire Firestore Module to be added to the VueFire Vue plugin options.
Example
ts
import { createApp } from 'vue'
import { VueFire, VueFireFirestoreOptionsAPI } from 'vuefire'
const app = createApp(App)
app.use(VueFire, {
modules: [VueFireFirestoreOptionsAPI()],
})
Parameters
| Name | Type |
|---|---|
pluginOptions? | FirestorePluginOptions |
Returns
fn
▸ (firebaseApp, app): void
Parameters
| Name | Type |
|---|---|
firebaseApp | FirebaseApp |
app | App<any> |
Returns
void
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. useObject() and useList()), you should not add it.
Deprecated
Use VueFire and VueFireDatabaseOptionsAPI with the modules option instead.
Parameters
| Name | Type |
|---|---|
app | App<any> |
pluginOptions? | DatabasePluginOptions |
firebaseApp? | FirebaseApp |
Returns
void
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()).
Deprecated
Use VueFire and VueFireFirestoreOptionsAPI with the modules option instead.b
Parameters
| Name | Type |
|---|---|
app | App<any> |
pluginOptions? | FirestorePluginOptions |
firebaseApp? | FirebaseApp |
Returns
void
getCurrentUser
▸ getCurrentUser(): 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.
Returns
Promise<_Nullable<User>>
updateCurrentUserProfile
▸ updateCurrentUserProfile(profile): Promise<undefined | 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<undefined | void>
useAppCheck
▸ useAppCheck(name?): undefined | AppCheck
Retrieves the Firebase App Check instance. Note this is only available on the client and will be undefined on the server.
Parameters
| Name | Type | Description |
|---|---|---|
name? | string | name of the application |
Returns
undefined | 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 the type of the query or converter.
Type parameters
| Name | Type |
|---|---|
R | extends Query<unknown> | CollectionReference<unknown> |
Parameters
| Name | Type | Description |
|---|---|---|
collectionRef | _MaybeRef<_Nullable<R>> | query or collection |
options? | UseCollectionOptions | 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 | _MaybeRef<_Nullable<Query<DocumentData> | CollectionReference<DocumentData>>> | query or collection |
options? | UseCollectionOptions | optional options |
Returns
_RefFirestore<VueFirestoreQueryData<T>>
useCurrentUser
▸ useCurrentUser(name?): Ref<_Nullable<User>>
Returns a shallowRef 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 when the user is not yet 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
useDocument
▸ useDocument<R>(documentRef, options?): _RefFirestore<_InferReferenceType<R> | undefined>
Creates a reactive document from a document ref from Firestore. Extracts the the type of the converter
Type parameters
| Name | Type |
|---|---|
R | extends DocumentReference<unknown, R> |
Parameters
| Name | Type | Description |
|---|---|---|
documentRef | _MaybeRef<_Nullable<R>> | document reference |
options? | UseDocumentOptions | 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 | _MaybeRef<_Nullable<DocumentReference<DocumentData>>> | - |
options? | UseDocumentOptions | 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(name?): Auth
Retrieves the Firebase Auth instance.
Parameters
| Name | Type | Description |
|---|---|---|
name? | string | name of the application |
Returns
Auth
the Auth instance
useFirestore
▸ useFirestore(name?): Firestore
Retrieves the Firestore instance.
Parameters
| Name | Type | Description |
|---|---|---|
name? | string | name of the application |
Returns
Firestore
the Firestore instance
useList
▸ useList<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 | _MaybeRef<Query | DatabaseReference> | Reference or query to the database |
options? | UseDatabaseRefOptions | optional options |
Returns
_RefDatabase<VueDatabaseQueryData<T>>
useObject
▸ useObject<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 | _MaybeRef<DatabaseReference> | Reference or query to the database |
options? | UseDatabaseRefOptions | optional options |
Returns
_RefDatabase<VueDatabaseDocumentData<T> | undefined>
usePendingPromises
▸ usePendingPromises(app?): Promise<readonly [string, unknown][]>
Allows awaiting for all pending data sources. Useful to wait for SSR
Parameters
| Name | Type |
|---|---|
app? | FirebaseApp |
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? | 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
Retrieves the Storage instance.
Parameters
| Name | Type | Description |
|---|---|---|
name? | string | name of the application |
Returns
FirebaseStorage
the Database instance
useStorageMetadata
▸ useStorageMetadata(storageRef): Object
Returns a reactive version of the metadata of a StorageReference. Updates automatically if the StorageReference changes.
Parameters
| Name | Type | Description |
|---|---|---|
storageRef | _MaybeRef<_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> |
useStorageObject
▸ useStorageObject(storageRef): Object
Reactive information (url, metadata) of a StorageReference. Allows updating and deleting the storage object.
Parameters
| Name | Type | Description |
|---|---|---|
storageRef | _MaybeRef<_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> |
useStorageUrl
▸ useStorageUrl(storageRef): Object
Retrieves a reactive download URL of a StorageReference. Updates automatically if the StorageReference changes.
Parameters
| Name | Type | Description |
|---|---|---|
storageRef | _MaybeRef<_Nullable<StorageReference>> | StorageReference |
Returns
Object
| Name | Type |
|---|---|
promise | Ref<{ [toStringTag]: string ; catch: <TResult>(onrejected?: null | (reason: any) => TResult | PromiseLike<TResult>) => Promise<null | string | TResult> ; finally: (onfinally?: null | () => void) => Promise<null | string> ; then: <TResult1, TResult2>(onfulfilled?: null | (value: null | string) => TResult1 | PromiseLike<TResult1>, onrejected?: null | (reason: any) => TResult2 | PromiseLike<TResult2>) => Promise<TResult1 | TResult2> }> |
refresh | () => { [toStringTag]: string ; catch: <TResult>(onrejected?: null | (reason: any) => TResult | PromiseLike<TResult>) => Promise<null | string | TResult> ; finally: (onfinally?: null | () => void) => Promise<null | string> ; then: <TResult1, TResult2>(onfulfilled?: null | (value: null | string) => TResult1 | PromiseLike<TResult1>, onrejected?: null | (reason: any) => TResult2 | PromiseLike<TResult2>) => Promise<TResult1 | TResult2> } |
url | Ref<undefined | null | string> |