CODEWITHSUNDEEP
javascriptfirebasefirebase-realtime-databasegoogle-cloud-functionsnuxt.js
Joaquin684
Joaquin684

Reputation: 57

How to access firebase realtimedb in NUXT js

We have a realtimedb in firebase that has data as follows:

enter image description here

On our nuxt page we have the following method:

async getDb () {
      const messageRef = this.$firebase.database.ref('test')
      try {
        const snapshot = await messageRef.once('value')
        alert(snapshot.val().message)
      } catch (e) {
        alert(e)
      }
    },

That is run by this in mounted like this:

mounted () {
    this.getDb()
  },

I keep getting this error:

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'database')

Am I doing something wrong? I have all of the firebase config in Nuxt.config.js and suth is working fine. I also added the realtimedb to services:

 services: {
  realtimeDb: true,
  auth: {
    ssr: true,
    // it is recommended to configure either a mutation or action but you can set both
    initialize: {
      onAuthStateChangedMutation: 'ON_AUTH_STATE_CHANGED_MUTATION'
      // onAuthStateChangedAction: 'onAuthStateChangedAction'
    }
  },

How do you actually access the data from the realtimedb so I can display the test array on my page?

Upvotes: 0

Views: 961

Answers (1)

JM Gelilio
JM Gelilio

Reputation: 3768

You are using $firebase which is not included in this documentation. To grant access to your Realtime Database use the following:

$fire.database

or

$fireModule.database

Note:

If you are using nuxt/firebase version 6 use realtimeDb and database for version 7 in services of nuxt.config.js, see this link for more details.

Upvotes: 2

Related Questions