Где инициализировать Firebase в приложении Vue JS?

Question

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

Когда я инициализирую Firebase в index.html или main.js, в обоих случаях у меня появляется ошибка

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

Я должен инициализировать его в моем компоненте (Dashboard). Это правильный способ инициализации firebase в одном из моих компонентов? Почему я могу сделать это, например, main.js?

Answer 1

Один из способов - получить файл firebaseConfig.js, подобный следующему

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
};

и импортируйте и используйте его в каждом из ваших Компонентов (где вам нужен Firebase) следующим образом:

<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>