Skip to content
On this page

useRTDB

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

Available in the @vueuse/firebase add-on.

Usage

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

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

// in setup()
const todos = useRTDB(db.ref('todos'))
import { initializeApp } from 'firebase/app'
import { getDatabase } from 'firebase/database'
import { useRTDB } from '@vueuse/firebase/useRTDB'

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

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

You can reuse the db reference by passing autoDispose: false

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

or use createGlobalState from the core package

js
// store.js
import { createGlobalState } from '@vueuse/core'
import { useRTDB } from '@vueuse/firebase/useRTDB'

export const useTodos = createGlobalState(
  () => useRTDB(db.ref('todos')),
)
// store.js
import { createGlobalState } from '@vueuse/core'
import { useRTDB } from '@vueuse/firebase/useRTDB'

export const useTodos = createGlobalState(
  () => useRTDB(db.ref('todos')),
)
js
// app.js
import { useTodos } from './store'

const todos = useTodos()
// app.js
import { useTodos } from './store'

const todos = useTodos()

Type Declarations

typescript
export interface UseRTDBOptions {
  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>
export interface UseRTDBOptions {
  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>

Source

Category
Export Size
287 B
Package
@vueuse/firebase
Last Changed
8 months ago

SourceDocs

贡献者(Contributors)

日志(Changelog)

No recent changes

Released under the MIT License.