lessons/nuxt-3-firebase/

[utterances-bot]

Realtime SSR with Nuxt3 and Firebase

How to setup Firebase v9 for SSR and realtime hydration in Nuxt3

https://fireship.io/lessons/nuxt-3-firebase/

[chstappert]

just fyi: there are a 404 on the code button.

[Nuzzlet]

I'd love to see a an extension of this video covering SSR authentication.

[dosstx]

When trying to get all documents in a collection and doing this code:

import { firestore } from '../utils/firebase'
import { collection, getDocs } from 'firebase/firestore'

export default defineEventHandler(async (event) => {
  const querySnapshot = await getDocs(collection(firestore, 'posts'))
  querySnapshot.forEach((doc) => {
    console.log(doc.data())
  })
})

I get a server error: [nuxt] [request error] Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

[Nuzzlet]

When trying to get all documents in a collection and doing this code:

import { firestore } from '../utils/firebase'
import { collection, getDocs } from 'firebase/firestore'

export default defineEventHandler(async (event) => {
  const querySnapshot = await getDocs(collection(firestore, 'posts'))
  querySnapshot.forEach((doc) => {
    console.log(doc.data())
  })
})

I get a server error: [nuxt] [request error] Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

It would seem your firestore imported from utils is not correct. Inside your utils/firebase you should have it like so: export const firestore = getFirestore(app)

[dosstx]

@Nuzzlet Thanks for your comment. I copied the code from the fireship video and it does not show the app in the getFirestore(app) . I tried it both with and without.

I am able to retrieve a single document from the firebase admin server sdk and it works fine without the app part, but for some reason I get that error when using the collection() function.

I do get firestore object back if I console.log(firestore).

Are you able to replicate this issue if you tried to do:

import { firestore } from '../utils/firebase'
import { collection, getDocs } from 'firebase/firestore'

export default defineEventHandler(async (event) => {
  const db = firestore
  //   console.log(db)
  const colRef = collection(db, 'posts')
  console.log(colRef)
  //   const querySnapshot = await getDocs(collection(firestore, 'posts'))
  //   querySnapshot.forEach((doc) => {
  //     console.log(doc.data())
  //   })
})

[Nuzzlet]

@Nuzzlet Thanks for your comment. I copied the code from the fireship video and it does not show the app in the getFirestore(app) . I tried it both with and without.

I am able to retrieve a single document from the firebase admin server sdk and it works fine without the app part, but for some reason it does not work when using the collection() function.

Are you able to replicate this issue if you tried to do:

const querySnapshot = await getDocs(collection(firestore, 'posts'))
  querySnapshot.forEach((doc) => {
   console.log(doc.data())
   })

Are you saying that if you replace "collection" with "doc" it works?

[dosstx]

This works:

import { firestore } from '../utils/firebase'

export default defineEventHandler(async (event) => {
  const ref = firestore.doc(`animals/dog`)
  const snapshot = await ref.get()
  const data = snapshot.data()
  return {
    data
  }
})

This doesn't:

import { firestore } from '../utils/firebase'
import { collection, getDocs } from 'firebase/firestore'

export default defineEventHandler(async (event) => {
  const db = firestore
  //   console.log(db)
  const colRef = collection(db, 'posts')
  console.log(colRef)
  //   const querySnapshot = await getDocs(collection(firestore, 'posts'))
  //   querySnapshot.forEach((doc) => {
  //     console.log(doc.data())
  //   })
})

I get error: [nuxt] [request error] Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

[Nuzzlet]

This works:

import { firestore } from '../utils/firebase'

export default defineEventHandler(async (event) => {
  const ref = firestore.doc(`animals/dog`)
  const snapshot = await ref.get()
  const data = snapshot.data()
  return {
    data
  }
})

This doesn't:

import { firestore } from '../utils/firebase'
import { collection, getDocs } from 'firebase/firestore'

export default defineEventHandler(async (event) => {
  const db = firestore
  //   console.log(db)
  const colRef = collection(db, 'posts')
  console.log(colRef)
  //   const querySnapshot = await getDocs(collection(firestore, 'posts'))
  //   querySnapshot.forEach((doc) => {
  //     console.log(doc.data())
  //   })
})

I get error: [nuxt] [request error] Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore

It would seem you're attempting to pass a firebase admin SDK reference to the client sdk functions.

You cannot mix and match references between the two SDKs.

You'll want to use a composable to initiate and access the client SDK. The utils folder should only be accessed server side, with the firebase-admin SDK. NOT the client side adk.

You can tell the difference because admin SDK imports start with from "firebase-admin while the client sdk starts with from "@firebase/

[dosstx]

that was the issue. Thanks!

[rendomnet]

Dear Fireship I have paid for Pro and CAN'T access slack and github!

[rendomnet]

But how you deploy this to firebase?

[pjmanning]

How would you add in a parameter to get a different doc? (ie cat/dog/tiger etc)