How to setup firebase v6.3.4 using npm in Vue project?

Question

I need to use Firebase in my Vue.js project and after installing it by npm install firebase --save I made a new folder in root-src named 'firebase'. In there I have one .js file - 'init.js'. Inside of that .js file I want to setup my firebase. Code below shows my full 'init.js' file. Then in one of my .vue files when I want to access it I need to 1st do import db from '@/firebase/init' .

I get one big red error over my screen only.

 const firebaseConfig = {
     apiKey: "...",
     authDomain: "...",
     databaseURL: "...",
     projectId: "...",
     storageBucket: "...",
     messagingSenderId: "..",
     appId: "..." }

 const firebaseApp = firebase.initializeApp(firebaseConfig)

 firebaseApp.firestore().settings({ timestampsInSnapshots: true})

 export default firebaseApp.firestore()

The big red error says that it

Failed to compile - Error:ENOENT

Answer 1

I think the easiest solution is to install vue-fire. You have a lot documentation about configuration here:

Vue-Fire - Getting Started

and also basic example here:

Vue-Fire - Basic Example

---

If you do not want to use it you should read this great article:

Real-World Web App With Vue.js and Firebase (there is also a repo of this project)

Good luck :)

Answer 2

You don't seem to be importing firebase in init.js, so your use of the firebase variable there does not refer to anything.

import firebase from 'firebase/app'

// And your code...
 const firebaseConfig = {
     apiKey: "...",
     authDomain: "...",
     databaseURL: "...",
     projectId: "...",
     storageBucket: "...",
     messagingSenderId: "..",
     appId: "..." }

 const firebaseApp = firebase.initializeApp(firebaseConfig) // consume firebase here

 firebaseApp.firestore().settings({ timestampsInSnapshots: true})

 export default firebaseApp.firestore()