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
typescriptvue.jsvisual-studio-code

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;

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Having difficulty invoking the forEach function on an Array in TypeScript

I'm currently working with a class that contains an array of objects. export interface Filter { sf?: Array<{ key: string, value: string }>; } In my attempt to loop through and print out the value of each object inside the array using the forE ...

typescript

Converting an HTML page to PDF with Angular using jsPdf and Html2Canvas

[1st img of pdf generated with position -182, 0, image 208,298 ][1]Converting an HTML page to PDF in Angular 8+ using jspdf and Html2canvas has been a challenge. Only half of the page is successfully converted into PDF due to a scaling issue. Printing th ...

htmlangulartypescriptjspdfhtml2canvas

Asynchronous update of array elements - lack of firing watch events

I have recently developed a component that showcases previews of blog articles. This particular component includes pagination functionality, where selecting a new page triggers the refreshment of the article previews array. The list of articles is obtained ...

javascriptasynchronousvue.jsvuejs2vue-component

The issue with Axios formData containing an image results in an empty array being sent

I am facing an issue with the token authentication while trying to make a put request to my profile route in the backend. Despite passing the token through a header, I am receiving an error indicating that an empty formData is being sent when logging the r ...

vue.jsaxios

Analyzing a string using an alternative character

I want to convert the string "451:45" into a proper number. The desired output is 451.45. Any help would be appreciated! ...

angulartypescript

While developing my Vue.js project, I encountered an unexpected issue

I started a fresh project using Vue Js and encountered an issue. Code snippet: export default { name: 'welcome', mounted: function() { $(window).load(function() { $('.flexslider').flexslider({ animation: "slide", ...

vue.js

Developing a firestore query using typescript on a conditional basis

I've encountered an issue while attempting to create a Firestore query conditionally. It seems like there's a TypeScript error popping up, but I can't seem to figure out what's causing it. Here's the snippet of my code: const fetch ...

reactjstypescriptfirebasegoogle-cloud-firestore

What steps are needed to link my Javascript application with Amazon Keyspaces?

I am a beginner looking for assistance with extracting data from Amazon keyspaces tables on a small demo website with 4 categories and 4 subcategories. I have created the tables but can't find a tutorial, please help. The goal is to display database ...

javascriptvisual-studio-codecassandraamazon-keyspacesdatastax-node-driver

Having difficulty accessing an element within ng-template during the unit test writing process with Jasmine

I am encountering an issue when trying to access a button inside an ng-container in my testing environment. Despite manually setting the value of the ngIf condition to true, the elements inside are not being rendered. Here is what I have attempted so far: ...

angulartypescriptunit-testingjasminekarma-jasmine

How can I use a Vue.js function to extract latitude and longitude data from a nested JSON file?

When using getcoords(), I am only getting the first latitude and longitude for all entries in my array. However, when using the normal syntax {{fire.latitude}},{{fire.longitude}}, I am able to retrieve all latitudes and longitudes. I'm not sure why t ...

listvue.jsaxiosmapscoords

Locate and retrieve the item that appears most often in a given array

In order to determine the mode of an array consisting of integer numbers only, I must create a function named findMode. If the array is empty, the function should return 0. Otherwise, it should return the element that occurs most frequently in the array. I ...

arraystypescriptfor-loopreturnmode

Tips for ensuring the angular FormArray is properly validated within mat-step by utilizing [stepControl] for every mat-step

When using Angular Material stepper, we can easily bind form controls with form groups like [stepControl]="myFormGroup". But how do we bind a FormArray inside a formGroup? Constructor constructor(private _fb: FormBuilder){} FormArray inside For ...

angulartypescriptmaterial-uiangular-material

Build an interactive form with Vue.js and PHP for seamless submission

I am having trouble submitting a form that is created inside a v-for loop. I have tried using Ajax and Axios, but they only seem to work when the form is outside of the v-for loop. Can someone provide a solution for this issue? Below is the code snippet: ...

phpajaxvue.js

The value of this.$refs.<refField> in Vue.js with TypeScript is not defined

During the process of converting my VueJs project to TypeScript, I encountered an error related to TypeScript. This issue arises from a component with a custom v-model implementation. In the HTML, there is an input field with a 'plate' ref that ...

javascripttypescriptvue.jsvuejs2vue-component

Tips on clearing and updating the Edit Modal dialog popup form with fresh data

This code snippet represents my Edit button functionality. The issue I am facing is that I cannot populate my Form with the correct data from another component. Even when I click the (Edit) button, it retrieves different data but fails to update my form, ...

angulartypescript

Using a loop in a Vue.js slick slider: easy step-by-step guide

While utilizing vue-slick link https://www.npmjs.com/package/vue-slick within a bootstrap modal, I encountered an issue when using a v-for loop to iterate through the items. The problem can be seen in this example: . Below is an excerpt of my code: imp ...

javascriptvue.js

Combining Angular with X3D to create a seamless integration, showcasing a minimalist representation of a box

I am brand new to web development, and I am feeling completely overwhelmed. Recently, I decided to follow the Angular tutorial by downloading the Angular Quickstart from this link: https://github.com/angular/quickstart. My goal was to add a simple x3d ele ...

angulartypescriptx3d

I require clarity on this befuddling syntax that feels like descending into

I came across this example in the official documentation at https://angular.io/guide/form-validation#custom-validators return (control: AbstractControl): {[key: string]: any} => { const forbidden = nameRe.test(control.value); return forbidden ...

angulartypescript

Updating state within a loop using Quasar (VueX)

I am currently working on a Quasar application and utilizing VueX to manage the state of my app. However, I am encountering an issue when trying to update properties within a for loop. Despite inputting values, they do not seem to be getting set in the st ...

vue.jsvuexquasar-framework

Is it possible to utilize an imported function within the global router.beforeEach in Vue.js?

I'm attempting to utilize an imported function within my global router guard, but I encounter the following error message: getCurrentStage is not defined The getCurrentStage function is imported from shops.js This is what shop.js looks like: import ...

vue.jsvue-router