vuefire

  • Version 3.2.0
  • Published
  • 215 kB
  • 1 dependency
  • MIT license

Install

npm i vuefire
yarn add vuefire
pnpm add vuefire

Overview

Official Firebase bindings for Vue.js

Index

Variables

variable devalueCustomParsers

const devalueCustomParsers: {
TimeStamp: (data: ReturnType<Timestamp['toJSON']>) => Timestamp;
GeoPoint: (data: ReturnType<GeoPoint['toJSON']>) => GeoPoint;
};
  • Custom parsers for [devalue](https://github.com/Rich-Harris/devalue) to support Firestore Timestamp and GeoPoint on SSR.

variable devalueCustomStringifiers

const devalueCustomStringifiers: {
TimeStamp: (data: unknown) => false | { seconds: number; nanoseconds: number };
GeoPoint: (data: unknown) => false | { latitude: number; longitude: number };
};
  • Custom stringifier for [devalue](https://github.com/Rich-Harris/devalue) to support Firestore Timestamp and GeoPoint on SSR.

variable firestoreDefaultConverter

const firestoreDefaultConverter: FirestoreDataConverter<any>;
  • Default converter for Firestore data. Can be overridden globally by setting globalFirestoreOptions.converter.

variable globalDatabaseOptions

const globalDatabaseOptions: _DatabaseRefOptionsWithDefaults;

    variable globalFirestoreOptions

    const globalFirestoreOptions: _FirestoreRefOptionsWithDefaults;
    • Global default options

    variable useList

    const useList: <T = unknown>(
    reference: MaybeRefOrGetter<any>,
    options?: UseListOptions<T>
    ) => _RefDatabase<VueDatabaseQueryData<T>>;
    • Deprecated

      use useDatabaseList() instead

    variable useObject

    const useObject: <T = unknown>(
    reference: MaybeRefOrGetter<DatabaseReference>,
    options?: UseObjectOptions<T>
    ) => _RefDatabase<T & { readonly id: string }>;
    • Deprecated

      use useDatabaseObject() instead

    variable useStorage

    const useStorage: (name?: string) => firebase_storage.FirebaseStorage;
    • Deprecated

      use useFirebaseStorage() instead

    variable useStorageMetadata

    const useStorageMetadata: (storageRef: MaybeRefOrGetter<StorageReference>) => {
    metadata: vue_demi.ShallowRef<any>;
    update: (newMetadata: SettableMetadata) => Promise<any>;
    refresh: () => Promise<any>;
    promise: vue_demi.ShallowRef<Promise<any>>;
    };
    • Deprecated

      use useStorageFileMetadata() instead

    variable useStorageObject

    const useStorageObject: (storageRef: MaybeRefOrGetter<StorageReference>) => {
    url: vue_demi.Ref<string>;
    metadata: vue_demi.ShallowRef<any>;
    snapshot: vue_demi.ShallowRef<any>;
    uploadTask: vue_demi.ShallowRef<any>;
    uploadError: vue_demi.ShallowRef<any>;
    uploadProgress: vue_demi.ComputedRef<number>;
    upload: (
    newData: Blob | Uint8Array | ArrayBuffer,
    newMetadata?: UploadMetadata
    ) => Promise<unknown>;
    updateMetadata: (newMetadata: SettableMetadata) => Promise<any>;
    refresh: () => Promise<[string, any]>;
    };
    • Deprecated

      use useStorageFile() instead

    variable useStorageUrl

    const useStorageUrl: (storageRef: MaybeRefOrGetter<StorageReference>) => {
    url: vue_demi.Ref<string>;
    refresh: () => Promise<string>;
    promise: vue_demi.ShallowRef<Promise<string>>;
    };
    • Deprecated

      use useStorageFileUrl() instead

    Functions

    function databaseDefaultSerializer

    databaseDefaultSerializer: (
    snapshot: DataSnapshot
    ) => VueDatabaseDocumentData<unknown>;
    • Convert firebase Database snapshot of a ref **that exists** into a bindable data record.

      Parameter snapshot

    function databasePlugin

    databasePlugin: (
    app: App,
    pluginOptions?: DatabasePluginOptions,
    firebaseApp?: 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.

      Parameter app

      Parameter pluginOptions

      Deprecated

      Use VueFire and VueFireDatabaseOptionsAPI with the modules option instead.

    function firestorePlugin

    firestorePlugin: (
    app: App,
    pluginOptions?: FirestorePluginOptions,
    firebaseApp?: 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()).

      Parameter app

      Parameter pluginOptions

      Deprecated

      Use VueFire and VueFireFirestoreOptionsAPI with the modules option instead.b

    function getCurrentUser

    getCurrentUser: (name?: string) => 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.

      Parameter name

      name of the firebase application

    function rtdbPlugin

    rtdbPlugin: (
    app: App,
    pluginOptions?: DatabasePluginOptions,
    firebaseApp?: 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.

      Parameter app

      Parameter pluginOptions

      Deprecated

      Use VueFire and VueFireDatabaseOptionsAPI with the modules option instead.

    function updateCurrentUserProfile

    updateCurrentUserProfile: (profile: {
    displayName?: _Nullable<string>;
    photoURL?: _Nullable<string>;
    }) => 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.

      Parameter profile

      the new profile information

    function useAppCheck

    useAppCheck: (name?: string) => AppCheck;
    • Retrieves the Firebase App Check instance.

      Parameter name

      name of the application

    function useAppCheckToken

    useAppCheckToken: () => Ref<string>;
    • The current app-check token as a Ref. Note this ref is always undefined on the server.

    function useCollection

    useCollection: {
    <R extends unknown>(
    collectionRef: MaybeRefOrGetter<R>,
    options?: UseCollectionOptions<_InferReferenceType<R>[]>
    ): _RefFirestore<_InferReferenceType<R>[]>;
    <T>(
    collectionRef: MaybeRefOrGetter<any>,
    options?: UseCollectionOptions<T[]>
    ): _RefFirestore<VueFirestoreQueryData<T>>;
    };
    • 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.

      Parameter collectionRef

      query or collection

      Parameter options

      optional options

    • 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.

      Parameter collectionRef

      query or collection

      Parameter options

      optional options

    function useCurrentUser

    useCurrentUser: (name?: string) => Ref<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.

      Parameter name

      name of the application

    function useDatabase

    useDatabase: (name?: string) => firebase_database.Database;
    • Retrieves the Database instance.

      Parameter name

      name of the application

      Returns

      the Database instance

    function useDatabaseList

    useDatabaseList: <T = unknown>(
    reference: MaybeRefOrGetter<any>,
    options?: UseListOptions<T>
    ) => _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.

      Parameter reference

      Reference or query to the database

      Parameter options

      optional options

    function useDatabaseObject

    useDatabaseObject: <T = unknown>(
    reference: MaybeRefOrGetter<DatabaseReference>,
    options?: UseObjectOptions<T>
    ) => _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.

      Parameter reference

      Reference or query to the database

      Parameter options

      optional options

    function useDocument

    useDocument: {
    <R extends DocumentReference<unknown>>(
    documentRef: MaybeRefOrGetter<R>,
    options?: UseDocumentOptions<_InferReferenceType<R>>
    ): _RefFirestore<_InferReferenceType<R> | undefined>;
    <T>(
    documentRef: MaybeRefOrGetter<DocumentReference>,
    options?: UseDocumentOptions<T>
    ): _RefFirestore<T & { readonly id: string }>;
    };
    • Creates a reactive document from a document ref from Firestore. Automatically extracts the type of the converter or the document.

      Parameter documentRef

      document reference

      Parameter options

      optional options

    • 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.

      Parameter documentRef

      query or collection

      Parameter options

      optional options

    function useFirebaseApp

    useFirebaseApp: (name?: string) => FirebaseApp;
    • Gets the firebase app instance.

      Parameter name

      optional firebase app name

      Returns

      the firebase app

    function 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

      the Auth instance

    function useFirebaseStorage

    useFirebaseStorage: (name?: string) => firebase_storage.FirebaseStorage;
    • Retrieves the Storage instance.

      Parameter name

      name of the application

      Returns

      the Database instance

    function useFirestore

    useFirestore: (name?: string) => firebase_firestore.Firestore;
    • Retrieves the Firestore instance.

      Parameter name

      name of the application

      Returns

      the Firestore instance

    function useIsCurrentUserLoaded

    useIsCurrentUserLoaded: (name?: string) => vue_demi.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.

      Parameter name

      name of the application

    function usePendingPromises

    usePendingPromises: (
    app?: FirebaseApp
    ) => Promise<(readonly [string, unknown])[]>;
    • Allows awaiting for all pending data sources. Useful to wait for SSR

      Parameter app

      the firebase app

      Returns

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

    function useSSRInitialState

    useSSRInitialState: (
    initialState: SSRStore | undefined,
    firebaseApp: FirebaseApp
    ) => SSRStore;
    • Allows getting the initial state set during SSR on the client.

      Parameter initialState

      the initial state to set for the firebase app during SSR. Pass undefined to not set it

      Parameter firebaseApp

      the firebase app to get the initial state for

      Returns

      the initial states for the current firebaseApp

    function useStorageFile

    useStorageFile: (storageRef: MaybeRefOrGetter<StorageReference>) => {
    url: vue_demi.Ref<string>;
    metadata: vue_demi.ShallowRef<any>;
    snapshot: vue_demi.ShallowRef<any>;
    uploadTask: vue_demi.ShallowRef<any>;
    uploadError: vue_demi.ShallowRef<any>;
    uploadProgress: vue_demi.ComputedRef<number>;
    upload: (
    newData: Blob | Uint8Array | ArrayBuffer,
    newMetadata?: UploadMetadata
    ) => Promise<unknown> | undefined;
    updateMetadata: (newMetadata: SettableMetadata) => Promise<FullMetadata | null>;
    refresh: () => Promise<[string | null, FullMetadata | null]>;
    };
    • Reactive information (url, metadata) of a StorageReference. Allows updating and deleting the storage object.

      Parameter storageRef

      StorageReference

    function useStorageFileMetadata

    useStorageFileMetadata: (storageRef: MaybeRefOrGetter<StorageReference>) => {
    metadata: vue_demi.ShallowRef<any>;
    update: (newMetadata: SettableMetadata) => Promise<FullMetadata | null>;
    refresh: () => Promise<FullMetadata | null>;
    promise: vue_demi.ShallowRef<Promise<any>>;
    };
    • Returns a reactive version of the metadata of a StorageReference. Updates automatically if the StorageReference changes.

      Parameter storageRef

      StorageReference

    function useStorageFileUrl

    useStorageFileUrl: (storageRef: MaybeRefOrGetter<StorageReference>) => {
    url: vue_demi.Ref<string | null | undefined>;
    refresh: () => Promise<string | null>;
    promise: vue_demi.ShallowRef<Promise<string | null>>;
    };
    • Retrieves a reactive download URL of a StorageReference. Updates automatically if the StorageReference changes.

      Parameter storageRef

      StorageReference

    function VueFire

    VueFire: (app: App, { firebaseApp, modules }: VueFireOptions) => void;
    • VueFire Vue plugin.

    function VueFireAppCheck

    VueFireAppCheck: (
    options: VueFireAppCheckOptions
    ) => (firebaseApp: FirebaseApp, app: App) => 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.

      Example 1

      import { createApp } from 'vue'
      import { VueFire, VueFireAppCheck } from 'vuefire'
      const app = createApp(App)
      app.use(VueFire, {
      modules: [VueFireAppCheck()],
      })

    function VueFireAuth

    VueFireAuth: (initialUser?: User) => 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.

      Parameter initialUser

      initial value of the user. used for SSR

      Example 1

      import { createApp } from 'vue'
      import { VueFire, VueFireAuth } from 'vuefire'
      const app = createApp(App)
      app.use(VueFire, {
      modules: [VueFireAuth()],
      })

      See Also

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

    function VueFireAuthOptionsFromAuth

    VueFireAuthOptionsFromAuth: ({
    auth,
    initialUser,
    }: VueFireAuthOptionsFromAuth) => 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.

      Parameter options

      auth instance and initial user

    function VueFireAuthWithDependencies

    VueFireAuthWithDependencies: ({
    dependencies,
    initialUser,
    }: VueFireAuthOptions) => 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.

      Parameter options

      user and options to pass to initializeAuth().

    function VueFireDatabaseOptionsAPI

    VueFireDatabaseOptionsAPI: (
    pluginOptions?: DatabasePluginOptions
    ) => (firebaseApp: FirebaseApp, app: App) => 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.

      Example 1

      import { createApp } from 'vue'
      import { VueFire, VueFireDatabaseOptionsAPI } from 'vuefire'
      const app = createApp(App)
      app.use(VueFire, {
      modules: [VueFireDatabaseOptionsAPI()],
      })

    function VueFireFirestoreOptionsAPI

    VueFireFirestoreOptionsAPI: (
    pluginOptions?: FirestorePluginOptions
    ) => (firebaseApp: FirebaseApp, app: App) => void;
    • VueFire Firestore Module to be added to the VueFire Vue plugin options.

      Example 1

      import { createApp } from 'vue'
      import { VueFire, VueFireFirestoreOptionsAPI } from 'vuefire'
      const app = createApp(App)
      app.use(VueFire, {
      modules: [VueFireFirestoreOptionsAPI()],
      })

    Interfaces

    interface DatabasePluginOptions

    interface DatabasePluginOptions extends _DatabaseRefOptions {}
    • Options for the Firebase Database Plugin that enables the Options API such as $databaseBind and $databaseUnbind.

    property bindName

    bindName?: string;
    • @deprecated: was largely unused and not very useful. Please open an issue with use cases if you need this.

    property unbindName

    unbindName?: string;
    • @deprecated: was largely unused and not very useful. Please open an issue with use cases if you need this.

    interface DatabaseSnapshotSerializer

    interface DatabaseSnapshotSerializer<T = unknown> {}

      call signature

      (snapshot: DataSnapshot): VueDatabaseDocumentData<T>;

        interface FirestorePluginOptions

        interface FirestorePluginOptions extends FirestoreRefOptions {}
        • Options for the Firebase Database Plugin that enables the Options API such as $firestoreBind and $firestoreUnbind.

        property bindName

        bindName?: string;
        • @deprecated: was largely unused and not very useful. Please open an issue with use cases if you need this.

        property unbindName

        unbindName?: string;
        • @deprecated: was largely unused and not very useful. Please open an issue with use cases if you need this.

        interface UseCollectionOptions

        interface UseCollectionOptions<TData = unknown>
        extends _UseFirestoreRefOptions<TData> {}

          interface UseDatabaseRefOptions

          interface UseDatabaseRefOptions<DataT = unknown>
          extends _DatabaseRefOptions<DataT> {}
          • Options when calling useDatabaseList() and useDatabaseObject().

          interface UseDocumentOptions

          interface UseDocumentOptions<TData = unknown>
          extends _UseFirestoreRefOptions<TData> {}

            interface VueFireAppCheckOptions

            interface VueFireAppCheckOptions extends AppCheckOptions {}

              property debug

              debug?: boolean | string;
              • Setups the debug token global. See https://firebase.google.com/docs/app-check/web/debug-provider. Note you should set to false in production (or not set it at all). It can be set to a string to force a specific debug token.

              interface VueFireAuthOptions

              interface VueFireAuthOptions {}
              • Options for VueFire Auth module.

              property dependencies

              dependencies: Dependencies;
              • Options to pass to initializeAuth().

              property initialUser

              initialUser?: _Nullable<User>;
              • Initial value of the user. Used during SSR.

              interface VueFireAuthOptionsFromAuth

              interface VueFireAuthOptionsFromAuth
              extends Pick<VueFireAuthOptions, 'initialUser'> {}
              • Options for VueFire Auth module when passing the auth instance directly.

              property auth

              auth: Auth;
              • Auth instance to use.

              interface VueFireModule

              interface VueFireModule {}
              • A VueFire module that can be passed to the VueFire Vue plugin in the modules option.

              call signature

              (firebaseApp: FirebaseApp, app: App): void;

                interface VueFireOptions

                interface VueFireOptions {}
                • Options for VueFire Vue plugin.

                property firebaseApp

                firebaseApp: FirebaseApp;
                • The firebase app used by VueFire and associated with the different modules.

                property modules

                modules?: VueFireModule[];
                • Array of VueFire modules that should be added to the application. e.g. [VueFireAuth, VueFireDatabase]. Remember to import them from vuefire.

                Type Aliases

                type FirebaseOption

                type FirebaseOption = VueFirebaseObject | (() => VueFirebaseObject);

                  type FirestoreOption

                  type FirestoreOption = VueFirestoreObject | (() => VueFirestoreObject);

                    type UseListOptions

                    type UseListOptions<DataT = unknown> = UseDatabaseRefOptions<DataT>;

                      type UseObjectOptions

                      type UseObjectOptions<DataT = unknown> = UseDatabaseRefOptions<DataT>;

                        type VueDatabaseDocumentData

                        type VueDatabaseDocumentData<T = unknown> =
                        | null
                        | (T & {
                        /**
                        * id of the document
                        */
                        readonly id: string;
                        });
                        • Type used by default by the serialize option.

                        type VueDatabaseQueryData

                        type VueDatabaseQueryData<T = unknown> = Array<
                        _Simplify<NonNullable<VueDatabaseDocumentData<T>>>
                        >;
                        • Same as VueDatabaseDocumentData but for a query.

                        type VueFirebaseObject

                        type VueFirebaseObject = Record<string, Query | DatabaseReference>;

                          type VueFirestoreDocumentData

                          type VueFirestoreDocumentData<T = DocumentData> =
                          | null
                          | (T & {
                          /**
                          * id of the document
                          */
                          readonly id: string;
                          });
                          • Type used by default by the firestoreDefaultConverter.

                          type VueFirestoreObject

                          type VueFirestoreObject = Record<string, _FirestoreDataSource>;

                            type VueFirestoreQueryData

                            type VueFirestoreQueryData<T = DocumentData> = Array<
                            _Simplify<NonNullable<VueFirestoreDocumentData<T>>>
                            >;

                              Package Files (1)

                              Dependencies (1)

                              Dev Dependencies (27)

                              Peer Dependencies (3)

                              Badge

                              To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                              You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/vuefire.

                              • Markdown
                                [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/vuefire)
                              • HTML
                                <a href="https://www.jsdocs.io/package/vuefire"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>