useRTDB

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

Usage

import { useRTDB } from '@vueuse/firebase/useRTDB'
import { initializeApp } from 'firebase/app'
import { getDatabase } from 'firebase/database'

const app = initializeApp({ /* config */ })
const db = getDatabase(app)

// in setup()
const todos = useRTDB(db.ref('todos'))

Options

Return Value

Returns a Ref<T | undefined> that is automatically updated when the database value changes.

Reusing Database References

You can reuse the db reference by passing autoDispose: false

const todos = useRTDB(db.ref('todos'), { autoDispose: false })

or use createGlobalState from the core package

```ts twoslash include store // @filename: store.ts // ---cut--- // store.ts import { createGlobalState } from '@vueuse/core' import { useRTDB } from '@vueuse/firebase/useRTDB'

export const useTodos = createGlobalState( () => useRTDB(db.ref('todos')), )

<!-- app.vue --> <script setup lang="ts"> // @include: store // ---cut--- import { useTodos } from './store'

const todos = useTodos() </script>

## Type Declarations

export interface UseRTDBOptions { errorHandler?: (err: Error) => void autoDispose?: boolean } /** * Reactive Firebase Realtime Database binding. * * @see https://vueuse.org/useRTDB */ export declare function useRTDB<T = any>( docRef: DatabaseReference, options?: UseRTDBOptions, ): Ref<T | undefined, T | undefined>