How to properly use vuefire with nuxt3?

354 views Asked by At

I am always getting an error Expected first argument to collection() to be a CollectionReference, a DocumentReference or FirebaseFirestore when I try to get collection from firestore. What I'am doing wrong?

Somepage.vue

<script setup>
import {Timestamp} from "@firebase/firestore-types";
import {useCollection, useFirestore} from "vuefire";
import {collection} from "@firebase/firestore";


const db = useFirestore()

interface IUsers{
  id: string
  name: string,
  password: string,
  createdAt: Timestamp
}

const usersCollectionRef = collection(db, '/users-tmp')
const usersCollection = useCollection<IUsers>(usersCollectionRef)


console.log(usersCollection);
</script>

nuxt.config.ts

vuefire: {
        auth: true,
        config: {
            apiKey: process.env.NUXT_API_KEY,
            authDomain: process.env.NUXT_AUTH_DOMAIN,
            projectId: process.env.NUXT_PROJECT_ID,
            appId: process.env.NUXT_APP_ID,
            storageBucket: process.env.NUXT_STORAGE_BUCKET,
            messagingSenderId: process.env.NUXT_MESSAGING_SENDER_ID
        }
    },
modules: [
    'nuxt-vuefire'
]

package.json

"dependencies": {
    "@firebase/app-types": "^0.9.0",
    "firebase": "^10.3.0",
    "firebase-admin": "^11.10.1",
    "firebase-functions": "^4.4.1",
    "nuxt-vuefire": "^0.2.17",
    "vuefire": "^3.1.15"
  }

I'm tried to import {collection} from '@firebase/firestore/lite'

const usersCollection = useCollection<IUsers>(collection(db, '/users-tmp'))

But I have the same error

0

There are 0 answers