How to use with Nuxt3?

[dosstx]

I am testing out the possibily of using VueFire@next with Nuxt3 and tried to do the following setup based on the Vuefire docs:

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <span>{{ post }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useCollection } from 'vuefire'
import { collection } from 'firebase/firestore'

onMounted(() => {
  const { firestore } = useFirebase()
  const posts = useCollection(collection(firestore, 'posts'))
})
</script>

The above code causes the following warning in devtools and nothing is rendered to the screen.

[Vue warn]: Property "posts" was accessed during render but is not defined on instance.
at <Scratch onVnodeUnmounted=fn ref=Ref< undefined > >
at <Anonymous key="/scratch" routeProps= {Component: {…}, route: {…}} pageKey="/scratch" ... >
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at
at
at
at
at
at <BaseTransition mode="out-in" appear=false persisted=false ... >
at
at
at
at

Note: I am using this code successfully without Vuefire, but I wanted to test out Vuefire as a possible alternative. Thank you!

[posva]

There are plans for a nuxt module that will handle the SSR out of the box. At this moment, the SSR is a bit manual to handle so it's better if you don't need it yet.

As for your example, you need to move the posts variable outside of the onMounted() or it will simply not be accessible, as the error tells you 😄

[dosstx]

Thanks! Yes, I made the following update:

<template>
  <div>
    <ul>
      <li v-for="post in posts" :key="post.id">
        <span>{{ post }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { useCollection } from 'vuefire'
import { collection } from 'firebase/firestore'

const posts = ref([])

onMounted(() => {
  const { firestore } = useFirebase()
  posts.value = useCollection(collection(firestore, 'posts'))
})
</script>

But I have to put the useFirebase() composable in the mounted hook because otherwise I get the following error:
Component auth has not been registered yet

I do now see posts array in devtools but for some reason the id property is labeled a function ? Thus, using :key="post.id" won't work for the UI:

Devtools error:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'id')

[posva]

it's useCollection(..., { target: posts }) instead

[dosstx]

Like this?

posts.value = useCollection(collection(firestore, 'posts'), {
    target: posts
  })

I tried that now and get this error:

shared.esm-bundler.js:453 
        
       Uncaught (in promise) TypeError: Converting circular structure to JSON
    --> starting at object with constructor 'Object'
    |     property 'deps' -> object with constructor 'Object'
    |     index 0 -> object with constructor 'Object'
    |     property 'Set(1)' -> object with constructor 'Array'
    --- index 0 closes the circle
    at JSON.stringify (<anonymous>)
    at toDisplayString (shared.esm-bundler.js:453:24)
    ```
  

    Sorry to bother....thank you for your time.

[posva]

no, without the posts.value =

[posva]

The module is now documented in VueFire docs!