Firebase .on with Vue without using Vuefire

Question

I'm trying to implement a real-time connection with Firebase's .on ref, but have no idea where to plug that in or use it in Vue. The tutorials online all use Vuefire to accomplish it, but if I just want to use the Firebase SDK, where can I activate this .on connection in my Vue project and have it work in a two-way data connection real-time?

Hmm.. It didn't seem to work. This is what I'm using,

export default {
    name: 'index',
    data() {
        return {
            id: '1234',
            meData: 'test'
        }
    },
    mounted() {
        const database = firebase.database().ref( 'rooms' + this.id );
        database.on( 'value', snapshot => {
            this.meData = snapshot.val();
        });
    }
}

I tried testing with push, it works, so the config and firebase is working, but the .on doesn't seem to work. I get no errors too so I'm having a hard time figuring out the issue. =(

You need to use slashes to access: ref('/rooms/' + this.id); — IzumiSy
– IzumiSy, Commented Oct 2, 2017 at 14:55
I tried adding the slashes too, it didn't work. But I changed it to .push and it works. Just the real-time .on doesn't work. =( — Kelvin Zhao
– Kelvin Zhao, Commented Oct 3, 2017 at 1:11
I would like to see your database tree on Firebase. Could you paste the screenshot of it? — IzumiSy
– IzumiSy, Commented Oct 3, 2017 at 2:48
As it is just for testing there is no data in the database atm. After the .push worked, I also deleted that node to try .on — Kelvin Zhao
– Kelvin Zhao, Commented Oct 3, 2017 at 2:51
.on needs a parent branch in your database tree. If you don't have rooms, you can't watch it. Before use .on, add some trees to watch. — IzumiSy
– IzumiSy, Commented Oct 3, 2017 at 6:10

IzumiSy · Accepted Answer · 2017-10-01 14:09:44Z

2

At first, always the best option is to use VueFire if you need to use Vue.js and Firebase.

However, if you want to use Vue.js without Vuefire, you can set up the firebase instance in mounted section in your component. Vue component's lifecycle is not the same as the one without Vue, so you better to use lifecycle handler provided by Vue.

Vue.component("YourComponent", {
  ...

  mounted() {
    firebase.initializeApp({
      apiKey: "apiKey",,
      databaseURL: "https://databaseName.firebaseio.com"
    });

    const database = firebase.database();

    database.ref('/users/100').once('value').then((snapshot) => {
      // Do your business
    });

    ...

    //
    // You can also set up more handlers like above...
    //
  },

  ...
});

However, if you want to use two-way binding, it is a little tough. The good point of Vuefire is its easy mixin of Vue component data structure and Firebase instance.

Without Vuefire, the code I can think up would be like this

Vue.component("YourComponent", {
  ...

  data() {
    return {
      users: []
    };
  },

  ...

  mounted() {

    //
    // Initialize Firebase SDK and get `database` to use below.
    //

    ...

    database.ref('/users').on('value', (snapshot) => {
      // By using arrow function, the context of `this` here is binded
      // into the current component data `users`.
      this.users = snapshot.val();
    });  
  },

  ...
});

answered Oct 1, 2017 at 14:09

IzumiSy

1,51810 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kelvin Zhao Over a year ago

Hmm.. It didn't seem to work. This is what I'm using, export default { name: 'index', data() { return { id: '1234', meData: 'test' } }, mounted() { const database = firebase.database().ref( 'rooms' + this.id ); database.on( 'value', snapshot => { this.meData = snapshot.val(); }); } } I tried testing with push, it works, so the config and firebase is working, but the .on doesn't seem to work. I get no errors too so I'm having a hard time figuring out the issue. =(

IzumiSy Over a year ago

I can't see your source code well. Could you edit your question and add your own code to it?

Kelvin Zhao Over a year ago

Updated in the main question. Can't seem to edit comments.

Kelvin Zhao · Accepted Answer · 2017-10-14 12:54:05Z

0

In case anyone else is looking to use Firebase in Vue without Vuefire.

Do check out this video!

Vue 2 & Vuex & Firebase Tutorial - Getting It All Working Together

https://youtu.be/niPgyv53x8c

answered Oct 14, 2017 at 12:54

Kelvin Zhao

2,4474 gold badges25 silver badges32 bronze badges

Collectives™ on Stack Overflow

Firebase .on with Vue without using Vuefire

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related