I'm having trouble establishing a connection between Firebase Realtime Database and Vue.js

I am having trouble establishing a connection to the Firebase Realtime Database.

import { initializeApp } from "firebase/app";
// Remember to add any necessary SDKs for Firebase products
// For more information, visit: https://firebase.google.com/docs/web/setup#available-libraries

// Configuration for your web app's Firebase project
const firebaseConfig = {
  apiKey: "AIzaSyDDQLlluO4FusOQ8ucJvD_svdMJE5dkOlw",
  authDomain: "portfolio-4dd8c.firebaseapp.com",
  databaseURL: "https://portfolio-4dd8c-default-rtdb.europe-west1.firebasedatabase.app",
  projectId: "portfolio-4dd8c",
  storageBucket: "portfolio-4dd8c.appspot.com",
  messagingSenderId: "237808071168",
  appId: "1:237808071168:web:006dc98a6c3272fbd39ee5"
};
 
// Intializing Firebase with the provided configuration
const app = initializeApp(firebaseConfig);

When I import 'firebase' and use app.database(), I encounter an error stating that app.database() is not a function. I also attempted importing 'firebase' specifically from 'firebase/app'.

However, when I try importing 'firebase' without specifying 'app', my terminal throws the following error:

This dependency was not found:

  • firebase in ./src/main.js

To resolve this issue, you can run: npm install --save firebase Error from chokidar (C:): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'

javascriptfirebasevue.jsfirebase-realtime-databasevuejs2

Answer №1

To access a Database instance in Modular SDK, you must import getDatabase:

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

const app = initializeApp({...config})

const db = getDatabase(app)

export { db }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Saving the execution of a function within an array

Creating a JavaScript program where function calls that generate 3D objects will be stored in an array is my current project. Specifically, I aim to include the following function calls: draw_cylinder(0,0,3,2); draw_sphere(0,0,5,3); draw_cone(17,0,7,3); d ...

javascriptarrays

Invoking a JavaScript function using C# code-behind

The geodata API provides a comprehensive list of countries, states, and cities around the world through three separate select Lists. These select Lists cannot be server-side and may take some time to load all the options. I am looking to preselect a speci ...

javascriptc#htmlasp.net

I struggle to grasp the significance of the scene's positioning

I've been experimenting with some sample code using three.js, where I've created a plane and I want it to rotate around. Here's a snippet of my code: This is the setup for my camera: var camera = new THREE.PerspectiveCamera(70, window.inner ...

javascriptthree.js

Manipulate an object in Three.js using the ObjLoader functionality

I'm currently working on manipulating an object loaded using OBJLoader in Three.js. The issue I'm facing is that while it's easy to manipulate the object once, I can't figure out how to do so during the animate loop or anywhere outside ...

javascriptthree.jsobjloader

problem encountered while rendering the React Native flatList

Hello fellow developers, I'm currently working on creating a RssFeeder app to enhance my skills in React Native. Unfortunately, I've encountered an issue while trying to render objects obtained from the newsAPI in a flatList. The data is not disp ...

javascriptnode.jsreactjsreact-nativereact-native-flatlist

steps to assign variables to $key and $value for ajax data

I am currently working on dynamically generating ajax data using $key and $value for a search query. With three dropdown menus, I aim to loop through each of them when one changes in order to retrieve their values and create a $key + $value pair for my aja ...

javascriptphpjqueryajax

Exploring the Visual World of React: The Image Universe

When using create-react-app, where should my images folder be located? Should it be in the src directory or the public directory? Will placing it in one directory over the other cause issues when running yarn build? I've heard that only files withi ...

javascriptreactjsnpmcreate-react-appyarnpkg

The process of logging in with Parse.User encounters a glitch

I developed a user login feature: export const userLogin = (email, password) => (dispatch) => { console.log(email, password); dispatch({ type: actionTypes.AUTH_LOGIN_STARTED }); console.log("after dispatch"); Parse.User.logIn(email, passwo ...

javascriptparse-platformparse-server

Exploring the capabilities of NodeJS together with the fetch function of Backbone

I have a code snippet for the front-end using fetch: var MyModel = Backbone.Model.extend(); var MyCollection = Backbone.Collection.extend({ url: '/questions', model: MyModel }); var coll = new MyCollection(); ...

javascriptnode.jsbackbone.js

Accessing data in JSON format from a URL

I'm working on a website that analyzes data from the game Overwatch. There's this link () that, when visited, displays text in JSON format. Is there a way to use JavaScript to read this data and display it nicely within a <p> tag on my si ...

javascripthtmljson

Including a plugin with Rollup results in redundant Vue.js package imports within the client application's bundle (specifically Nuxt)

Hello amazing developers of Stack Overflow, Vue.js, and Rollup! I may be a newbie when it comes to developing plugins with Vue and Rollup, but I'm hoping that my explicit question can benefit other newcomers in the future. My plugin is designed to a ...

vue.jswebpackpluginsnuxt.jsrollup

Implementing a JQuery modal with backend coding

I have encountered a problem in my ASP.NET code-behind where I am trying to incorporate a modal popup. Despite my efforts, I have not been able to successfully implement it. Do you have any suggestions on how I should proceed with this process? <scrip ...

javascriptjqueryasp.netmodal-dialogbootstrap-modal

Keep sending HTTP requests until the header contains an attachment

Welcome to our web application where you can generate and download a .zip file simply by visiting the URL. I am looking to develop a Node.js application using the requestjs library that will continuously send requests until it detects an attachment header ...

javascriptnode.jshttprequestjs

Is it possible to use a global mixin alongside an imported one in Vue?

Alright, so I'm working on a Vue 2 project and I have set up a global mixin. Take a look at the code snippet below: import Vue from "vue"; import App from "./App"; import router from "./router"; import store from "./ ...

vue.jsvuejs2mixins

Transform the date from toLocaleString to a different Date format

I am currently dealing with a situation where I need to convert a date format using the toLocaleString method. const localDate = proDate.toLocaleString("en-GB").replace(/,/g, ""); In this case, proDate refers to a new Date(someDate) o ...

javascriptdatedatetime

Journey Swiftly Control

I have a question. Is it possible to manipulate routes in Express? Can I assign multiple routes to the same get or post request when providing an address? module.exports = function (app) { var controller = app.controllers.maps.cliente; app.route(&apos ...

javascriptnode.jsexpress

Updating the class of the "like" button icon using an AJAX form within the HTML view of a Ruby on Rails application

I'm facing an issue where my page isn't updating the icon after a successful Ajax function. Even though the data is posted to the database without any problems, the content doesn't refresh unless I manually reload the page. I want to be able ...

javascriptjqueryhtmlruby-on-railsajax

Exploring the depths of a JSON structure using jQuery

This is my first time working with JSON data and I need some guidance on a specific issue. When using .getJSON on a local file, the structure appears neat like this: https://i.sstatic.net/7CYPC.jpg I can easily retrieve the value I want (CustRep) with c ...

javascriptjqueryarraysjson

I am unable to make changes to my `<input type="file">` element

I've been struggling to modify this button, and even tried incorporating bootstrap javascript without success. Below is a snippet of the code I'm working with. Any guidance on how to achieve this would be highly appreciated. <html> < ...

javascripttwitter-bootstrap

Redirecting with PHP after registration using AJAX

My registration form incorporates PHP error checking for issues like a short password. AJAX alerts the user with any errors echoed from PHP. Once the if else statement in PHP is executed, the user is successfully registered and redirected to index.php. he ...

javascriptphpajax