Vuefire: Vuefire is either not working or the "firebase" component property is not functioning.

[ConnerFrancis]

I'm currently trying to create a simple firebase system for my website. This system will be used for a small forum and I set up a small testing page for vuefire and firebase. The full repo and all code (which is up to date) is here: https://github.com/ConnerFrancis/connerfrancis.github.io/tree/dev

I've installed firebase and vuefire with npm and the --save flag. Here are all files portaining to firebase and vuefire:

main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import '@/firebase'
import VueFire from 'vuefire'
import Vue from 'vue'
import App from './App'
import router from './router'

// init Firebase with Vue
Vue.use(VueFire)

Vue.config.productionTip = false

// init Vue
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

firebase.js

import firebase from 'firebase'

const app = firebase.initializeApp({
  apiKey: "AIzaSyA6SRssT6ut6rNLQvaLPs-4QNIsbt-mFsI",
  authDomain: "connet-702fc.firebaseapp.com",
  databaseURL: "https://connet-702fc.firebaseio.com",
  projectId: "connet-702fc",
  storageBucket: "connet-702fc.appspot.com",
  messagingSenderId: "437958455389"
})

const db = app.database()
export default db

pages/hidden/Firebase.vue

<template>

  <div id="firebase">
    users:
    {{ users }}
    {{ anUser }}
    <div v-for="user of users">
      {{ user.bio }}
    </div>
  </div>

</template>

<script>

  import db from '@/firebase'

  export default {
    name: 'Firebase',

    data () {
      return {
        users: {}
      }
    },

    firebase: {
      anUser: db.ref('users/first'), // this is a correct ref, i checked using my db browser and entering in this ref link

      users: {
        source: db.ref('users'),
        asObject: true,

        cancelCallback(err) {
          window.alert(err)
        }
      }
    }
  }

</script>

<style lang="scss" scoped>

  #firebase {
    background-color: $grey-lightest;
  }

</style>

When I navigate to the firebase testing page at localhost:8080/#/firebase, the users object is not populated and I get this error:

[Vue warn]: Property or method "anUser" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

found in

---> <Firebase> at src/pages/hidden/Firebase.vue
       <App> at src/App.vue
         <Root>

I'm not sure what I'm doing wrong here. Any help or ideas?

[posva]

Make sure you are using the RTDB version of vuefire (default npm tag).
With that version, you don't need to add users to data btw

Other than that I don't see what is missing, I could take a look if you have a jsfiddle with minimal reproduction, otherwise it's just too much

[ConnerFrancis]

Wow, you were right about the npm install :ok_hand:. I'm disappointed in myself to an extent, because I had installed the vuefire@next (I think that's what it is) version rather than the default npm tag. Thank you so much, it's working just fine now! :+1:

To anyone else with this issue, do this:
npm uninstall vuefire vuefire@next firebase --save
npm install vuefire firebase --save

[posva]

oh lol, wasn't expecting that. The one on the next tag is for Firestore and the other is for the old RTDB

[ConnerFrancis]

Yeah, I think I got it from a guide on Medium or a post from somewhere. Sometimes it's the least expected things that work out.

[5lineofcode]

Thanks, i have same problem :(
This 2 command works!

@posva
@ConnerFrancis
npm uninstall vuefire vuefire@next firebase --save
npm install vuefire firebase --save

[posva]

Some medium posts are outdated from 2017. There is no need for the next tag anymore. That tag can and will be updated sometimes to test features but it won't always have every update.

I'm locking to keep this as the last answer