// Initialize Firebase
  var config = {
    apiKey: "...",
    authDomain: "my-project.firebaseapp",
    databaseURL: "",
    projectId: "my-project",
    storageBucket: "my-project.appspot",
    messagingSenderId: "..."
  };
  firebase.initializeApp(config);

When I initialize Firebase in index.html or main.js, in both cases i have an error

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

I have to initialize it in my ponent (Dashboard). Is it proper way to initialize firebase in one of my ponents? Why i can do this in e.g. main.js ?

  // Initialize Firebase
  var config = {
    apiKey: "...",
    authDomain: "my-project.firebaseapp.",
    databaseURL: "https://my-project.firebaseio.",
    projectId: "my-project",
    storageBucket: "my-project.appspot.",
    messagingSenderId: "..."
  };
  firebase.initializeApp(config);

When I initialize Firebase in index.html or main.js, in both cases i have an error

Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app).

I have to initialize it in my ponent (Dashboard). Is it proper way to initialize firebase in one of my ponents? Why i can do this in e.g. main.js ?

• javascript
• firebase
• vue.js
• firebase-realtime-database

• Similar asked question: stackoverflow./questions/53139432/… – user10297237 Commented Nov 6, 2018 at 22:19

2 Answers 2

One way is to have a firebaseConfig.js file like the following

import firebase from 'firebase/app';
import 'firebase/firestore';

var config = {
    apiKey: "....",
    authDomain: ".....",
    databaseURL: ".....",
    ......
};
firebase.initializeApp(config);

const db = firebase.firestore();

// date issue fix according to firebase
const settings = {
    timestampsInSnapshots: true
};
db.settings(settings);

export {
    db
};

and import and use it in each of your Components (where you need Firebase) as follows:

<template>
    ......
</template>
<script>
const firebase = require('../firebaseConfig.js');
export default {
  name: 'xxxxx',
  data() {
    return {
      ....
    };
  },
  methods: {
    fetchData() {
      firebase.db
        .collection('xxxxx')
        .get()
        ..... //Example of a call to the Firestore database
    }
  }
  .... 
};
</script>

So I found that creating an index.js within a firebase directory.

Then within that file you should set it up with the following:

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

// firebase init - add your own config here
const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  databaseURL: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: ''
}
firebase.initializeApp(firebaseConfig)

// utils
const db = firebase.firestore()
const auth = firebase.auth()

// collection references
const usersCollection = db.collection('users')
const postsCollection = db.collection('posts')

// export utils/refs
export {
  db,
  auth,
  usersCollection,
  postsCollection
}

Then inside of main.js should be the following

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import { auth } from './firebase'

let app
auth.onAuthStateChanged(() => {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')
  }
})