CODEWITHSUNDEEP
firebasevue.js
Fb16455
Fb16455

Reputation: 111

Display data From Firebase RTDB using Vue.js

Noob on Vue.js here. I've been trying to display the data retrieved from a Firebase Realtime Database.

To set up the project, I have done the following:

Then I proceeded to edit some files. First, I added

import { rtdbPlugin } from 'vuefire'
Vue.use(rtdbPlugin)

to the file at ./src/main.js.

In ./src/App.vue file, I wrote the following:

<template>
  <div id='app'>
    <!-- This should display all the data retrieved from Firebase RTDB -->
    <div v-for='(message) in messages'>
      <h4>{{ message.title }}</h4>
      <p>{{ message.text }}</p>
      <p>{{ message.timestamp }}</p>
    </div>
  </div>
</template>

<script>
import { initializeApp } from 'firebase/app'

// Using the Realtime Database feature from firebase
import { getDatabase, ref } from 'firebase/database'

// The config options 
let config = {
  apiKey: <apiKey>,
  authDomain: <authDomain>,
  databaseURL: <databaseURL>,
  projectId: <projectId>,
  storageBucket: <storageBucket>,
  messagingSenderId: messagingSenderId,
  appId: <appID>
}

// Initialize Firebase
const app = initializeApp(config)

// Obtain the reference to our messages database object
const db = getDatabase(app)

let messagesRef = ref(db, 'messages')

export default {
  name: 'app',
  // Export the messages object in the Vue data object
  data () {
    messages: messagesRef
  }
}
</script>

Those are all the changes I've made to the project.

When I ran the project using npm run dev, nothing happens on the page, i.e., the list is not displayed. On the Console tab of DevTools I get nothing but the following:

[HMR] Waiting for update signal from WDS...
vue.esm.js?efeb:9121 Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools

I have no clue on what could be wrong. How could I fix this?

Please, let me know if any more information is needed.

Thanks in advance!

Upvotes: 0

Views: 787

Answers (1)

Fb16455
Fb16455

Reputation: 111

After some research I found that vuefire isn't yet compatible to Firebase v9, which was the version installed when I ran npm install vuefire firebase --save. Then I installed the Firebase v7 using npm i [email protected] and changed the App.vue code to:

// Import the individual SDK components to be used.
import firebase from 'firebase/app'
import 'firebase/database'

// The config options 
let config = {
  apiKey: <apiKey>,
  authDomain: <authDomain>,
  databaseURL: <databaseURL>,
  projectId: <projectId>,
  storageBucket: <storageBucket>,
  messagingSenderId: messagingSenderId,
  appId: <appID>
}

let app = firebase.initializeApp(config)

// Obtain the reference to our messages database object
let db = app.database()
let messagesRef = db.ref('messages')

export default {
  name: 'app',
  // Export the messages object in the Vue data object
  data () {
    return {
      messages: []
    }
  },
  firebase: {
    messages: messagesRef
  }
}

I followed the instructions from Vuefire Docs. The main.js was left untouched.

I don't know whether this is the unique or the best solution, but it solved my problem: the list is rendered as expected (at least on the local server created by running npm run dev command).

Upvotes: 2

Related Questions