Managing component dependencies about vuefire HOT 18 CLOSED

So for example if I have a SaveList.vue, EditList.vue and List.vue components and I need to get firebaseApp.database().ref('myList') I'll just have to require this in all components right?

  import Firebase from 'firebase'

  const firebaseApp = Firebase.initializeApp({ databaseURL: '<YOUR-FIREBASE_URL>' })
  const db = firebaseApp.database()
  const listRef = db.ref('myList')

from vuefire.

@microcipcip Yup, or if you prefer, you could do it in a parent component and pass that instance down to the child components. Entirely up to yourself. I'm honestly not sure which one is more efficient though, hence the reason why I opened this issue. ;)

from vuefire.

I found a good example, although there's the extra complexity of vuex. I think the docs for vuefire are very limited, I have no idea how to get started without at least some basic examples.

from vuefire.

@microcipcip I see that that project is using an older version of the Firebase sdk, but from looking at the code, it seems that what I'm doing is right. Ie. initialise Firebase in each component where it's needed, then pass the props down to any child components that need the data - so the parent component is the one doing the heavy-lifting (with Firebase) so to speak.

from vuefire.

@niallobrien glad it helped, but I wouldn't close this issue, I think the docs needs these basic examples for beginners.

from vuefire.

@microcipcip Agreed - this is also an issue I raised for VuexFire and I'm attempting to put together a demo project for that. What I have done so far works, but I still have a lot of questions for @posva. See posva/vuexfire#5

I'll re-open this issue, but honestly, it's pretty straight-forward to do a demo app for VueFire. I recommend you use Vue-CLI with the Webpack template (for Vue 2.0, do vue init webpack#2.0 my-project as the 2.0 branch hasn't been merged yet) and let us know how you get on. :)

from vuefire.

Thanks for the tips, I will let you know how it goes, a lot of new concepts! I'll gladly wait for more docs/examples though :)

from vuefire.

Here's what I did - install Vue-CLI. Use the Webpack 2.0 template: vue init webpack#2.0 my-project. That will give you a full Vue 2.0 setup with Webpack etc.
@posva just recently merged my PR which includes a more complete example to the Readme. See the examples towards the bottom of this section. That's exactly what I did to integrate the two. Hope that helps @microcipcip

from vuefire.

Thanks a lot, how do I use anArray and anObject inside a component? Am I supposed to specifically include them inside the component? Do I have to import firebase on every component as well?

var projectsRef = new Firebase('https://myproject.firebaseio.com')
import Firebase from 'firebase'

from vuefire.

It's indeed better to handle one single sync for a given dataset. With vuex you always have one single entry point: your store. Passing data through props with vuefire is good.
If you have vuex + firebase, I recommend you using vuexfire

from vuefire.

@microcipcip That's the old way of doing it with the old Firebase sdk afaik.
I do it like so:

  import Firebase from 'firebase'

  const firebaseApp = Firebase.initializeApp({ databaseURL: '<YOUR-FIREBASE_URL>' })
  const db = firebaseApp.database()
  const messagesRef = db.ref('messages')

  export default {
    data () {
      return {
        newMessage: ''
      }
    },
    firebase: {
      messages: messagesRef
    },
    etc.
    etc.

I hope that makes sense? Also, be sure to check your Firebase rules.

from vuefire.

Yeah it does make sense, I was afraid of doing so in each component thinking it would be bad for the performance because I am inizializing the firebaseApp in each component. Dunno if Webpack takes care of that. If I use vuexfire I inizialize it only once and then pass the firebase objects via props?

from vuefire.

@microcipcip Yeah, I was worried about the same, but then think about it - you're essentially initialising a Firebase instance per component with the data only that component cares about. Trying to pass Firebase instances around could get messy really fast. The Webpack production build seems to be quite efficient.

from vuefire.

Ok, I'll try to follow your suggested approach. Thanks a lot for your help!

from vuefire.

@microcipcip No worries - please keep us posted on your progress - feel free to hit me up on Twitter: @niall_obrien

from vuefire.

I will :)

from vuefire.

I tried as microcipcip mentioned; call Firebase.initializeApp in every component that use firebase, but it looks like not working.

from vuefire.

I found the solution here: https://alligator.io/vuejs/vuefire-firebase/

from vuefire.