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

admin管理员组

文章数量:1191752

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?

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?

• javascript
• vue.js
• vuex
• vuejs3

Share Improve this question Follow edited Jan 14, 2022 at 19:47 Boussadjra Brahim 1 asked Dec 17, 2020 at 18:58 Eldar TailovEldar Tailov 37866 silver badges1818 bronze badges

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 21

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.

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

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

本文标签： javascriptVue 3appconfig is undefined How to bypass this errorStack Overflow