VueUse

TIP

available in add-on @vueuse/firebase

useRTDB

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

Usage

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

const db = firebase
  .initializeApp({ databaseURL: 'https://MY-DATABASE.firebaseio.com' })
  .database()

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

You can reuse the db reference by passing autoDispose: false

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

or use createGlobalStatefrom the core package

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

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

// app.js
import { useTodos } from './store'

new Vue({
  setup() {
    const todos = useTodos()
    return { todos }
  },
})

Type Declarations

export interface RTDBOptions {
  autoDispose?: boolean
}
/**
 * Reactive Firebase Realtime Database binding.
 *
 * @param docRef
 * @param options
 */
export declare function useRTDB<T = any>(
  docRef: firebase.database.Reference,
  options?: RTDBOptions
): Ref<T | undefined>

Source

Source • Docs