Cannot Read Property 'ref' Of Undefined

I'm building a simple web app with Vue + Firebase + Vuefire and I get 'Uncaught TypeError: Cannot read property 'ref' of undefined' when I try to use my Firebase db variable inside

Solution 1:

The problem was my Firebase code (including db variable) was inside main.js but it needed to be in it's own component. I created a firebase.js file :

import Firebase from'firebase'const firebaseApp = Firebase.initializeApp({
  # configuration
})

// Export the database for components to use.
export const db = firebaseApp.database()

Then in my component I simply imported my database variable :

import {db} from'../firebase'

Why didn't it work inside main.js? I'm not sure, maybe someone more knowledgeable can answer that.

Solution 2:

.ref is a firebase function, you need to import it. try

importFirebasefrom'firebase'

or

import * from'firebase'