How can I make vuefire show loading screen?

As title Vuefire can auto get data from firebase database, but it needs some loading time. So I want to display some css animation before data being fetched, is there any event can I $watch when it successed

You can do this multiple ways. Vuefire has readyCallback out of the box which is callback called when the data is fetched (ready).

Here it is:

var vm = new Vue({
  el: '#demo',
  data: function() {
    return {
       loaded: false
    }
  }
  firebase: {
    // simple syntax, bind as an array by default
    anArray: db.ref('url/to/my/collection'),
    // can also bind to a query
    // anArray: db.ref('url/to/my/collection').limitToLast(25)
    // full syntax
    anObject: {
      source: db.ref('url/to/my/object'),
      // optionally bind as an object
      asObject: true,
      // optionally provide the cancelCallback
      cancelCallback: function () {},
      // this is called once the data has been retrieved from firebase
      readyCallback: function () {
         this.loaded = true // NOTE THIS LINE
      }
    }
  }
})