Vue: Firebase: Error in mounted hook: "FirebaseError: No Firebase App '[DEFAULT]' has been created

Question

I am building Vue SPA and have checked many posts before posting this.

I am not sure what I am doing wrong.

Below is my App.Vue:

<template>
    <div id="app">
        <Navigation />
        <router-view class="container" :user="user" />
    </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
// import db from './db.js';
import Firebase from 'firebase';
export default {
    name: 'App',
    data: function() {
        return {
            user: null,
        };
    },
    mounted() {

        Firebase.auth().onAuthStateChanged(user => {
            if (user) {
                this.user = user.email;
            }
        });
    },
    components: {
        Navigation,
    },
};
</script>

<style lang="scss">
$primary: #37c6cf;
@import '../node_modules/bootstrap/scss/bootstrap';
</style>

Note: I have commmented the import from db.js which can be find after the first import. If I enable it Vue CLI is throwing different error.

in db.js:

import firebase from 'firebase';
const firebaseConfig = {
    apiKey: 'yourkey',
    authDomain: 'domainnew.firebaseapp.com',
    databaseURL: 'yourdomain.com',
    projectId: 'yourproject',
    storageBucket: 'test',
    messagingSenderId: '454545',
    appId: '1:444d96:web:d78df',
    measurementId: 'G-69599595',
};

// Initialize firebase
const firebaseApp = firebase.initializeApp(firebaseConfig);
firebase.analytics();
export default firebaseApp.firestore();

In the console I am keep getting below two errors and my Vue is not retrieving my email address from Firebase.

Can any one pleas help on this.

Answer 1

The following should do the trick:

db.js file

import firebase from 'firebase/app';
import "firebase/analytics";
import 'firebase/firestore';
import 'firebase/auth';

const firebaseConfig = {
    apiKey: 'yourkey',
    authDomain: 'domainnew.firebaseapp.com',
    databaseURL: 'yourdomain.com',
    projectId: 'yourproject',
    storageBucket: 'test',
    messagingSenderId: '454545',
    appId: '1:444d96:web:d78df',
    measurementId: 'G-69599595',
};

firebase.initializeApp(firebaseConfig);



const db = firebase.firestore();
const auth = firebase.auth();
const analytics = firebase.analytics();

export { db, auth, analytics };

App.js file

<template>
    <div id="app">
        <Navigation />
        <router-view class="container" :user="user" />
    </div>
</template>

<script>
import Navigation from '@/components/Navigation.vue';
const fb = require('./db.js');

export default {
    name: 'App',
    data: function() {
        return {
            user: null,
        };
    },
    mounted() {

        fb.auth.onAuthStateChanged(user => {
            if (user) {
                this.user = user.email;
            }
        });
    },
    components: {
        Navigation,
    },
};
</script>

<style lang="scss">
$primary: #37c6cf;
@import '../node_modules/bootstrap/scss/bootstrap';
</style>