[Vuejs]-Vuefire: how to declare a reactive collection using usecollection() before the collection path is known?

by

0👍

✅

Since user is reactive, you need to build your query using a reactive observer that actively tracks the user state and fetches data accordingly.

Add the VueFireAuth module to the VueFire plugin:

// ./main.js
import { VueFire, VueFireAuth } from 'vuefire'
app.use(VueFire, {
  firebaseApp: createFirebaseApp(),
  modules: [
    // ... other modules
    VueFireAuth(),
  ],
})


  // get the current user as a reactive variable 
  // with the useCurrentUser() composable
  import { useCurrentUser } from 'vuefire'

  const user = useCurrentUser();

  const recipeRef = computed(() => {
    return getDocs(collection(db, `users/${user.value?.uid}/recipes`));    
  })

  // userRecipes will always be in sync with the data source
  const userRecipes = useCollection(recipeRef);

You can refer to VueFire’s docs for more details https://vuefire.vuejs.org/guide/auth.html

Leave a comment