Where to add firebase config variables on webpack vue project

Question

Implementing Firebase auth on my Vue webpack project. Google tells me to add the config to my index.html file.

If you do this and to go an view page source it exposes the api key to public. I am confused as to why google would suggest this.

Where should I position the configuration variables so it would be safe. Somebody said that main.js is not a good idea in production.

Where should I do the following in my Vue website.

var config = {
   apiKey: "<API_KEY>",
   authDomain: "<PROJECT_ID>.firebaseapp.com",
   databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
   projectId: "<PROJECT_ID>",
   storageBucket: "<BUCKET>.appspot.com",
   messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);

Answer 1

You can simply do it in the App.vue

import Firebase from 'firebase'
let config = {
    apiKey: "...",
    authDomain: "...",
    databaseURL: "...",
    storageBucket: "...",
    messagingSenderId: "..."
  };

let app = Firebase.initializeApp(config)
let db = app.database()
let someDataRef = db.ref('dataset')