Vue 3 - app.config is undefined. How to bypass this error?

Question

I'm doing everything by the docs, but, still having an error in the console. What I'm trying is to create a global variable of a Firebase instance.

main.js:

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import firebase from 'firebase'
require('firebase/firestore')

const config = {
    // config
}

firebase.initializeApp(config)

const app = createApp(App)
  .use(store)
  .use(router)
  .mount("#app");

console.log(app.config) // undefined
app.config.globalProperties.$firebase = firebase;

Why is it undefined? Or should I overwrite property globalProperties myself in the config object?

Thessa

Answer 1

const app = createApp(App).use(store).use(router).mount("#app") returns the root component instance not the app instance which has the field config, so, you should do:

const app = createApp(App)

const rootComponent = app.use(store)
  .use(router)
  .mount("#app");

console.log(app.config) 
app.config.globalProperties.$firebase = firebase;

Learn more about the differences here.

Mammalogy

Thank you so much for this. I was having the same exact issue. – Allround

Answer 2

config exists on the return value of createApp instead of the ending mount call:

const app = createApp(App);

app.use(store).use(router).mount('#app');

console.log(app.config); // Not undefined

Scorecard

Answer 3

I had to do it in this order

    const app = createApp({})
    app.config.globalProperties.DateUtils = DateUtils

    app.use(createVuetify({
        components: components,
        directives: directives
    }))
    app.mount("#app")

Housecoat