Attempting to implement firebase configuration within my Vue component

Edit: I made an error here ^^ !https://i.sstatic.net/0QGRx.png

firebase.js?5b23:11 Uncaught TypeError: app.database is not a function
at eval (firebase.js?5b23:11)
at Object../src/components/firebase/firebase.js (app.js:3496)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (selector.js?type=script&index=0!./src/components/front-end/Getstarted.vue:3)
at Object../node_modules/babel-loader/lib/index.js!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/front-end/Getstarted.vue (app.js:2791)
at __webpack_require__ (app.js:679)
at fn (app.js:89)
at eval (Getstarted.vue?5f4d:1)
at Object../src/components/front-end/Getstarted.vue (app.js:3552)

While attempting to move the firebase code into a separate file instead of the .vue file, I encountered issues. It functions as intended when placed within the vue file, but transferring it seems to be problematic.

<script>
import Firebase, { functions } from 'firebase'
import conf from '../firebase/firebase'

let config = {
    apiKey: ''
    authDomain: ''
    databaseURL: ''
    projectId: ''
    storageBucket: ''
    messagingSenderId: ''
}

let app = Firebase.initializeApp(config)
let db = app.database()

let booksRef = db.ref('books')
(dashboard.Vue)

*this is how it is in my vue file *

I have 2 javascript files One with:

import config from './firebaseConfig'

class Firebase {
  constructor () {
    firebase.initializeApp(config)
  }
}

let db = app.database()

let booksRef = db.ref('books')

export default Firebase()
(firebase.js)

and one with:

let config = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: ''
}

export default (config)
(firebaseConfig.js)

My folder structure looks like this:

components
|firebase
||firebase.js
||firebaseConfig.js
|backend
||Dashboard.vue

Upon loading the webpage, it displays as a blank page. Seeking guidance on restructuring this setup correctly. Feel free to ask if anything is unclear.

javascriptfirebasevue.js

Answer №1

There is an issue in the line below where the variable app has not been declared, resulting in it being undefined

let db = app.database()

To fix this problem, update your firebase.js file to:

import firebase from 'firebase'
import config from './firebaseConfig'

const app = firebase.initializeApp(config)
let db = app.database()

export default db

Then, make sure to import the database connection into your component like this:

import db from './firebase.js'
let booksRef = db.ref('books')
...

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

Learn how to extract substrings from a variable within an API using Vue.js

Exploring VueJs for the first time and looking to split a string by comma (,) retrieved from an API into separate variables. The data is coming from a JSON server. "featured-property": [ { "id": "1", " ...

javascriptvue.jssplit

Exploring Javascript: Understanding the Contrast Between Function and Class

In June 2015, with the introduction of ECMAScript 6, a new syntax for Javascript classes was unveiled. The new syntax is exemplified by the following code snippet: class Polygon { constructor(width, height) { this.width = width; thi ...

javascriptecmascript-6

Why does the Vue router sometimes refresh the page instead of properly navigating to it? Can you spot the difference between these two code examples?

I am encountering an issue while trying to click on a "checkout" button that is supposed to send cart data to a backend and redirect me to a URL generated by the backend. Despite receiving a valid URL, my code is not functioning correctly. When I attempt ...

javascriptvue.jsexpressvuejs3vue-router

I'm having issues with the functionality of my code inside the ng-template and ngIf. What could be

I am facing an issue with my method that is supposed to display the specified HTML content. However, it seems like the ngIf condition within the code block is not functioning correctly. Can someone help me understand why the ngIf statement is being ignored ...

javascriptangulartypescriptangular-ng-if

How can I automatically center a Vimeo iframe vertically without having to manually adjust the position?

I'm trying to adjust a popular fluid jQuery script so that it can automatically center a vimeo video vertically, without any black bars. A little horizontal cropping is acceptable. Here is my current code: HTML <div class="container"> < ...

javascriptjqueryhtmlcssiframe

Step-by-step guide on displaying a popup when a button is clicked in JSP

I am facing an issue with a JSP page that I have created. https://i.sstatic.net/Dy6zZ.png The code snippet for this page is as follows: <HTML> <HEAD> <META http-equiv=Content-Language content=en-us> <META http-equiv=Content-Type cont ...

javascriptjavajqueryjsp

Consecutive POST requests in Angular 4

Can you assist me with making sequential (synchronous) http POST calls that wait for the response from each call? generateDoc(project, Item, language, isDOCXFormat) : Observable<any> { return this.http.post(this.sessionStorageService.retriev ...

javascriptangularrest

Problem with RadioButton click event not triggering

Among my collection of RadioButton elements, there is an onclick event that should trigger. This event, named SecurityCheckedChanged, will display or hide other div containers (populated with RadioButton elements) based on the selected RadioButton. Howeve ...

javascriptjqueryasp.net

Struggling to implement a vertical scroll bar in HTML code?

<body ng-app="myApp" ng-controller="myCtrl"> <div ng-show = "dataFromRest" ng-repeat = "x in dataFromRest.posts" > <div class="tittle" style="width: 25%;"> <a href="" ng-click="showDi ...

javascripthtmlcssangularjs

Mouseover function not triggering until clicked on in Google Chrome

I'm attempting to execute a function when the cursor hovers over a list item as shown below: <div id="vue-app"> <ul> <li v-for="item in items" @mouseover="removeItem(item)">{{item}}</li> </ul> </div> ...

javascriptvue.jsmouseoverdom-events

Using AOS in WordPress causes the specified elements to appear as blank rather than fading in

Struggling to integrate Michalsnik's Animate On Scroll plugin into my Wordpress site. Followed the instructions to add the "data-aos" attribute to a div, but the element ends up being blank instead of fading in. <div class="textbox center branch-b ...

javascriptwordpressanimate-on-scroll

Having trouble making class changes with ng-class

I am attempting to change the direction of the arrow in my checkbox by utilizing two classes with the assistance of ng-class. Unfortunately, it is not producing the desired outcome. Below is my code: Note: The angularJS CDN has already been incorporated. ...

javascripthtmlcssangularjs

Passing a table value to a PHP script using JQuery on click event

I am struggling with implementing functionality to filter a dataset based on the link that the user clicks on within a bootstrap modal. The modal contains a morris.js graph and I need to pass the clicked value (e.g. Cluster1 or Cluster2) to a data pull scr ...

javascriptphpjqueryajaxmorris.js

Material UI - sending an icon as a property

I need help with inserting a material-ui icon into my component using props. Can you please advise on what I might be doing wrong? I am struggling with passing the icon down in JSX, and here is the attempt that is not working: This code snippet shows me t ...

javascriptreactjsmaterial-ui

Functional programming: Retrieve the initial truthy output from executing an array of diverse functions using a particular parameter

As I delve into the world of functional programming in TypeScript, I find myself contemplating the most idiomatic way to achieve a specific task using libraries like ramda, remeda, or lodash-fp. My goal is to apply a series of functions to a particular dat ...

javascripttypescriptfunctional-programminglodashramda.js

Utilize a recursive function to incorporate data into an array nested within other arrays

I am facing an issue where the data I'm trying to add to an element containing nested arrays is not getting updated in MongoDB, even though it appears correctly in the console. I have developed a function to navigate through the entire structure of th ...

javascriptnode.jsarraysmongodbexpress

Encountered an unexpected runtime error in Next.js - TypeError: Unable to access properties of null object (specifically 'tagName')

25 | const tagsList = []; 26 | for(let count = 0, index = headerEl.previousElementSibling; count < totalTags; count++, index = index.previousElementSibling){ > 27 | if (index.tagName.toLowerCase() === elementType) { | ...

javascriptreactjsnext.js

How to Use Google Calendar API to Retrieve Available Time Slots for a Given Day

Is there a way to extract the list of available time slots from my Google Calendar? Currently, I am only able to retrieve the list of scheduled events. I am utilizing the Google Calendar npm package. google_calendar.events.list(calObj.name,{ timeMin ...

javascriptnpmgoogle-calendar-api

Iterate through the list elements by utilizing jQuery

I am working with HTML code that looks like this: <ul class="lorem"> <li>text</li> <li>text</li> <li>hello</li> <li>text</li> </ul> Can someone help me figure out how to loop through ...

javascriptjquery

What sets apart an object within the scalajs scope from the exact same object within the js.global scope?

Attempting to create a basic example for rendering a cube using the THREEJS library. package three import org.scalajs.dom import scala.scalajs.js import scala.scalajs.js.Dynamic._ import scala.scalajs.js.annotation.JSName ... object ThreeExample { d ...

javascriptscalathree.jsscala.js