VueFire Documentation

VueFire provides official Firebase bindings for Vue.js. It offers idiomatic composables designed for realtime data and other Firebase services, aligning with Vue's declarative approach.

Key features include:

• Idiomatic APIs: Uses composables that handle nested collections, document references, and more automatically.
• Performance: VueFire manages the data binding to ensure state stays synchronized with the server while allowing full access to the Firebase JS SDK.
• Flexibility: Supports Firebase Database, Firestore, Authentication, and more via tree-shakable APIs built on top of the Firebase modular JS SDK.

VueFire is a library designed to make using Firebase with Vue easy. Key features include:

• Compatibility: Works with Vue >=2.7 and Vue 3.
• API Support: Supports both Composition and Options API.
• State Management: Works with Vuex, Pinia, and any object providing a Vue ref().
• Optimization: Built for Modular Firebase >=9 to enable optimal tree shaking.
• Reactivity: Automatically listens for changes in nested references.

Cloud Firestore supports document references. To write a reference to another document, pass the actual reference object returned by the database instance.

// Cloud Firestore only
db.collection('books').add({
  name: '1984',
  author: db.collection('authors').doc('george-orwell'),
})

To develop with the Nuxt Module, you must first generate the necessary type stubs and then start the playground environment.

1. Generate type stubs: npm run dev:prepare
2. Start the playground: npm run dev

To set up VueFire in a Vue 3 app, use the VueFire plugin with your initialized firebaseApp. You can also include additional modules like VueFireAuth() in the modules array.

import { createApp } from 'vue'
import { VueFire, VueFireAuth } from 'vuefire'
import App from './App.vue'
import { firebaseApp } from './firebase'

const app = createApp(App)
app.use(VueFire, {
  firebaseApp,
  modules: [
    VueFireAuth(),
  ],
})

app.mount('#app')

If you need to reuse an existing ref() (for example, one coming from a composable or a state management store like Pinia), you can pass that ref to the target option in the useCollection composable.

When using the target option:

1. The composable will use your provided ref instead of creating a new one.
2. The composable will not return the ref in its result object. Instead, it returns an object containing metadata (such as pending).

// given an existing Ref<Todo[]>
todos 

// Pass the existing ref to the 'target' option
const { pending } = useCollection(todoListRef, { target: todos })

Cloud Firestore supports Timestamp objects. Realtime Database does not support this type. Import Timestamp from your database instance to convert standard JavaScript Dates into Firestore Timestamps.

// Cloud Firestore only
import { Timestamp } from './db'

await db.collection('events').add({
  name: 'Prise de la Bastille',
  date: Timestamp.fromDate(new Date('1789-07-14')),
})

When using Nuxt, you can initialize Firebase services (like Analytics) by creating a plugin in the plugins/ directory.

Important: Use the .client suffix for services that only run on the client side (e.g., analytics.client.ts) to ensure they are not executed during SSR.

import {
  type Analytics,
  initializeAnalytics,
  isSupported,
} from 'firebase/analytics'

export default defineNuxtPlugin(async () => {
  const firebaseApp = useFirebaseApp()

  console.log('Loading analytics')

  let analytics: Analytics | null = null
  if (await isSupported()) {
    analytics = initializeAnalytics(firebaseApp)
    console.log('Loaded analytics')
  } else {
    console.log('Analytics not supported')
  }

  return {
    provide: {
      analytics,
    },
  }
})