Typsescript not working in fresh Vue3 project-CodePudding

After creating a new app using Vue CLI (Vue3, Babel, Typescript) the 'config' object on the main app object returned from the createApp function is not accessible.

I can see the Typescript 'App' type, and the associated config: AppConfig type, by drilling down in VS Code.

But VS Code highlights access to 'config' as an error:

Property 'config' does not exist on type 'ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>'.ts(2339)

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

app.config <-- can't do this

CodePudding user response：

Yep, this is because the mount method returns the ComponentPublicInstance rather than the vue instance itself. Since you've chained it to createApp method, the app constant will not contain the vue instance. Naturally, not allowing access to the config property. See the function signature below:

mount(rootContainer: HostElement | string, isHydrate?: boolean, isSVG?: boolean): ComponentPublicInstance;

You'll need to re-write the code as below in order to access the config property of the vue instance.

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

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

// You'll be able to access the config now
app.config;