Firebase – Vue database integration not working

I am trying integrating Firebase with Vue 4 application is currently getting the following error.

Uncaught TypeError: db__WEBPACK_IMPORTED_MODULE_1_.default.database is not a function

I am using “firebase”: “^9.0.0” “vue”: “^3.0.0”

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";


const firebaseConfig = {
// keys
};

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

export {db}

My function call is as below

import {reactive} from 'vue';
import { ref, set, push } from "firebase/database";
import {db} from "./db"


export default {
  setup(){
    const inputUsername = ref("");
    const inputMessage = ref("");
    const state = reactive({
        username: "",
        messages:[]
    });

    const Login = () =>{
      if(inputUsername.value != "" || inputUsername.value != null){
       state.username = inputUsername.value;
       inputUsername.value = "";
      }
    }
    const SendMessage = () => {
    //   const messagesRef = db.database().ref("messages");
      if (inputMessage.value === "" || inputMessage.value === null) {
        return;
      }
      const message = {
        username: state.username,
        content: inputMessage.value
      }
      set(push(ref(db, 'messages')), message);

    //   messagesRef.push(message);
      inputMessage.value = "";
    }
    return{
    inputUsername,
    Login,
    state,
    inputMessage,
    SendMessage
    }
  }
}

I tried the following the following suggestion but it didn’t work.

Thank you!

Answer

The new modular SDK does not use namespaces anymore. So you cannot use app.database(). You can simply export a database instance from the file where you initialize Firebase as shown below:

import { initializeApp } from "firebase/app";
import { getDatabase } from "firebase/database";

const app = initializeApp(firebaseConfig);

const db = getDatabase(app);

export {db}

Then import this wherever you need and use it:

import { ref, child, get } from "firebase/database";
import {db} from "../path/to/firebase.js"

const message = {
  username: state.username,
  content: inputMessage.value
}

set(push(ref(db, 'messages')), message);

You can learn more about the new syntax in the documentation

---

Uncaught TypeError: db._checkNotDeleted is not a function

This error arise due to the fact the you are importing ref from both firebase and vue. Please import Firebase’s ref as fireRef.

import { reactive, ref } from "vue";
import { ref as fireRef, set, push } from "firebase/database";
import { db } from "./db";

// usage 
set(push(fireRef(db, "messages")), message);