Vue3 project encountering issues with Typescript integration

Question

Vue3 project encountering issues with Typescript integration

When I created a new application using Vue CLI (Vue3, Babel, Typescript), I encountered an issue where the 'config' object on the main app object returned from the createApp function was not accessible.

In VS Code, I could see the Typescript 'App' type and the associated config: AppConfig type by drilling down into the code.

However, attempting to access 'config' led to an error being highlighted:

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

This issue occurred in the 'main.ts' file:

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 <-- this action cannot be performed

typescript vue.js visual-studio-code

Answer 1

Answer №1

A common issue arises because the mount method returns the ComponentPublicInstance, not the actual vue instance itself. When chained to the createApp method, the constant app does not hold the vue instance and thus, accessing the config property is not possible. Check out the function signature below:

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

To access the config property of the vue instance, you can rewrite the code as shown below:

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');

// Now you can access the config
app.config;

Answer 2

A common issue arises because the mount method returns the ComponentPublicInstance, not the actual vue instance itself. When chained to the createApp method, the constant app does not hold the vue instance and thus, accessing the config property is not possible. Check out the function signature below:

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

To access the config property of the vue instance, you can rewrite the code as shown below:

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');

// Now you can access the config
app.config;

Vue3 project encountering issues with Typescript integration

Answer №1

Similar questions

Speedy Typescript inquiry query

Retrieve the variance between two arrays and store the additions in AddedList and the removals in RemovedList using typescript

Modify the color of the matSnackbar

CSS for Adjusting Parent Height Based on Child Content

Use Vue.js to display a class when the input is invalid and not empty

The setupFile defined in Jest's setupFilesAfterEnv configuration is not recognized by the VSCode IDE unless the editor is actively open

How to bring in a class that was exported using `export = uuid` in Typescript

Applying Validators manually in Angular 2 beta 17

Changing the color of HTML text based on a variable in Vue JS can be achieved by altering the CSS styles dynamically

Utilizing Typescript to Inject Generics and Retrieve the Name of an ES6 Module

Showing Vue-Dropzone response in browser: A step-by-step guide

An issue has occurred: TransformError SyntaxError: Unexpected keyword 'const' was encountered

Using Typescript generics to create parameter and argument flexibility for both classes and

The query fails to retrieve results for the specified date and the beginning of the month

The deployment on Heroku is encountering issues due to TypeScript errors related to the MUI package

Invoke a function that generates an array within a v-for loop and iterate through the elements in a Vue.js component

What is the best way to associate dates with a particular ID within a textfield's value?

Upcoming 13.4 Error: NEXT_REDIRECT detected in API routes

vue.js and the various elements that make up its architecture

Manipulating the length of an array based on a specified range using Vue.js