Firebase error

I'm having troublue using Firebase with Nuxt, even following this video: https://www.youtube.com/watch?v=_pSkWZxLXsA

I'm still getting the error: Error adding document: FirebaseError: Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

I use Firebase as a plugin using the following code:

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

export default defineNuxtPlugin((nuxtApp) => {
  const firebaseConfig = {
    //api keys
  }

  const app = initializeApp(firebaseConfig)

  return {
    provide: {
      firebaseApp: app,
      db: getFirestore(app),
    },
  }
})

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

export default defineNuxtPlugin((nuxtApp) => {
  const firebaseConfig = {
    //api keys
  }

  const app = initializeApp(firebaseConfig)

  return {
    provide: {
      firebaseApp: app,
      db: getFirestore(app),
    },
  }
})

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

export default defineNuxtPlugin((nuxtApp) => {
  const firebaseConfig = {
    //api keys
  }

  const app = initializeApp(firebaseConfig)

  return {
    provide: {
      firebaseApp: app,
      db: getFirestore(app),
    },
  }
})

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

export default defineNuxtPlugin((nuxtApp) => {
  const firebaseConfig = {
    //api keys
  }

  const app = initializeApp(firebaseConfig)

  return {
    provide: {
      firebaseApp: app,
      db: getFirestore(app),
    },
  }
})

In my template I'm using this:

const { $db } = useNuxtApp()

async function addData() {
  try {
    const docRef = await addDoc(collection($db, 'users'), {
      first: 'Ada',
      last: 'Lovelace',
      born: 1815,
    })
    console.log('Document written with ID: ', docRef.id)
  }
  catch (e) {
    console.error('Error adding document: ', e)
  }
}

const { $db } = useNuxtApp()

async function addData() {
  try {
    const docRef = await addDoc(collection($db, 'users'), {
      first: 'Ada',
      last: 'Lovelace',
      born: 1815,
    })
    console.log('Document written with ID: ', docRef.id)
  }
  catch (e) {
    console.error('Error adding document: ', e)
  }
}

const { $db } = useNuxtApp()

async function addData() {
  try {
    const docRef = await addDoc(collection($db, 'users'), {
      first: 'Ada',
      last: 'Lovelace',
      born: 1815,
    })
    console.log('Document written with ID: ', docRef.id)
  }
  catch (e) {
    console.error('Error adding document: ', e)
  }
}

const { $db } = useNuxtApp()

async function addData() {
  try {
    const docRef = await addDoc(collection($db, 'users'), {
      first: 'Ada',
      last: 'Lovelace',
      born: 1815,
    })
    console.log('Document written with ID: ', docRef.id)
  }
  catch (e) {
    console.error('Error adding document: ', e)
  }
}

Thanks in advance!

YouTubeNet Ninja

Nuxt & Pinia with Firestore #4 - Adding New Documents

In this Nuxt & Pinia tutorial series, you'll learn how to manage Firestore data within a Pinia store.

Get access to ALL premium courses on NetNinja.dev:
https://netninja.dev/

Access the course files on GitHub:
https://github.com/iamshaunjp/pinia-with-firestore

Starter project on GitHub:
https://github.com/iamshaunjp/pinia-with-fire...

Nuxt & Pinia with Firestore #4 - Adding New Documents

Firebase error

Similar Threads

Similar Threads

Similar Threads