Vue3 App Initialization chaining syntax with config.globalProperties

user_2392537 0
Viewed 90

I started a Vue3 project with Vue CLI. The app initialization code was:

createApp(App)
.use(AudioVisual)
.component("font-awesome-icon", FontAwesomeIcon)
.mount('#app')

Now I want to use mitt to use event emitter, and thus I need to use app.config.globalProperties. So, I used the following syntax-

const app = createApp(App);
app.use(AudioVisual);
app.component("font-awesome-icon", FontAwesomeIcon);
app.config.globalProperties.emitter = emitter;
app.mount('#app');

Is there any way, I can use the first syntax and use mitt in my application? I tried

createApp(App)
    .config.globalProperties.emitter = emitter;
    ...

But that did not work.

eventemitter vuejs3 vue.js
1 Answers

app.config.globalProperties.emitter = emitter is an expression and isn't supposed to be chained. It may be beneficial to preserve app reference any way for testing or else, so chaining isn't crucial for initialization.

The assignment of global instance property can be done as regular Vue plugin; this is what third-party plugins commonly do:

createApp(App)
.use({
  install(app) {
    app.config.globalProperties.emitter = emitter;
  }
})
...
.mount("#app");
user_37315010
Related