I am using Quasar 2 with firebase. I configure firebase in src/boot/firebase.js with the following code:
const firebaseConfig = {...};
const app = createApp(App);
firebase.initializeApp(firebaseConfig);
// State only persists in current session/tab. Cleared if session/tab is closed
firebase.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION);
var secondaryApp = firebase.initializeApp(firebaseConfig, "Secondary");
app.config.globalProperties.$fb = firebase;
app.config.globalProperties.$func = firebase.functions();
app.config.globalProperties.$func_region = firebase.app().functions("region");
app.config.globalProperties.$db = firebase.firestore();
app.config.globalProperties.$st = firebase.storage();
app.config.globalProperties.$fb_sec = secondaryApp;
app.config.globalProperties.$geo = firebase.firestore.GeoPoint;
console.log(app.config);
export default async ({ Vue, store }) => {
const idleTimeInMillis = 900000;
const eventsHub = Vue;
app.use(IdleVue, {
eventEmitter: eventsHub,
store,
idleTime: idleTimeInMillis,
startAtIdle: false
});
app.mixin({
methods: {
async getInternalUserAccessControl() {
const snapshot = await this.$db
.doc("path/value")
.get();
return snapshot.data();
}
}
});
});
and I would like to access the app.config.globalProperties.$fb in src/router/index.js:
export default function() {
Router.beforeEach((to, from, next) => {
console.log(`index.js app.config: ${app.config}`);
app.globalProperties.$fb.auth().onAuthStateChanged(user => {...});
The console.log in index.js shows undefined.
You have to export the variable.
In src/boot/firebase.js :
const firebaseConfig = {...};
export const app = createApp(App);
firebase.initializeApp(firebaseConfig);
Or if you don't want to write export, you can also write :
# That way you can name the variable whatever you want in the other file, make sure if you name is like : app_:app to put import { app_ } in the other file
export default { app: app };
In src/router/index.js :
import { app } from '../boot/firebase.js';
I hope it will solve your problem