N
Nuxt•4w ago
Albatrauz

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),
    },
  }
})
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)
  }
}
Thanks in advance!
Net Ninja
YouTube
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...
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @Albatrauz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources and your question, it seems you're encountering an issue with Firebase integration in Nuxt. Let's address this problem step by step. 1. First, it's important to note that the error you're receiving suggests that the collection() function is not receiving the correct type of argument. This could be due to how you're initializing and providing the Firestore instance. 2. The approach you're using to set up Firebase as a plugin is generally correct, but there might be an issue with how you're accessing the Firestore instance in your component. 3. Instead of using const { $db } = useNuxtApp(), try using the useFirestore() composable provided by VueFire. This composable ensures that you're getting the correct Firestore instance. Here's a modified version of your code that might resolve the issue: 
<script setup>
import { collection, addDoc } from 'firebase/firestore'
import { useFirestore } from 'vuefire'

const db = useFirestore()

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)
  }
}
</script>
<script setup>
import { collection, addDoc } from 'firebase/firestore'
import { useFirestore } from 'vuefire'

const db = useFirestore()

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)
  }
}
</script>
This approach uses the useFirestore() composable, which should correctly provide the Firestore instance. If you're still encountering issues, it might be helpful to check your Nuxt configuration. Make sure you have the VueFire module properly set up in your nuxt.config.ts file: 
export default defineNuxtConfig({
  modules: ['nuxt-vuefire'],
  vuefire: {
    config: {
      // Your Firebase config here
    },
  },
})
export default defineNuxtConfig({
  modules: ['nuxt-vuefire'],
  vuefire: {
    config: {
      // Your Firebase config here
    },
  },
})
For more detailed information on setting up VueFire with Nuxt, you can refer to the Stack Overflow post on Firestore integration with Nuxt3. If these steps don't resolve your issue, it might be helpful to enable verbose logging for Firestore to get more information about the possible cause of the issue. You can do this by adding setLogLevel("debug") to your Firebase initialization code. Remember, when working with Firebase in a Nuxt application, it's crucial to handle both client-side and server-side rendering scenarios correctly. The VueFire module for Nuxt should help manage these scenarios, but make sure you're following the best practices for server-side rendering with Firebase. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@658266075192098826> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?