CODEWITHSUNDEEP
javascriptfirebasevue.jsfirebase-realtime-database
user14543107
user14543107

Reputation: 117

How to read data from Firebase Realtime Database with Vue.js

I am trying to console.log the documents in my firebase realtime database, but currently I get this error when I try:

[Vue warn]: Error in created hook: "TypeError: firebase__WEBPACK_IMPORTED_MODULE_2__.default.database(...).get is not a function"

How can I console log all of my docs in the database?

Here is my attempt:

<script>
import firebase from "firebase";
const db = firebase.database();
export default {
  name: "Login",
  data() {
    return {
      user: {
        email: "",
        password: "",
      },
    };
  },
  methods: {
    userLogin() {
      firebase
        .auth()
        .signInWithEmailAndPassword(this.user.email, this.user.password)
        .then(() => {
          this.$router.push("/");
        })
        .catch((error) => {
          alert(error.message);
        });
    },
  },
  created() {
    firebase
      .database()
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          console.log(doc.data());
        });
      });
  },
};
</script>

Upvotes: 0

Views: 1231

Answers (1)

Doug Stevenson
Doug Stevenson

Reputation: 317467

If you are using a module bundler, you should import the Firebase SDKs as shown in the documentation. This syntax is for version 8.0.0 or later of the client SDK:

import firebase from "firebase/app";
import "firebase/database";

For prior versions:

import * as firebase from "firebase/app";

Upvotes: 1

Related Questions