0
222
ViewsVue3 property 'x' does not exist on type 'Function' for global property
I have a Quasar app and seem to be having a weird issue. I am trying to define a global variable that is an object just containing meta info about the app. The app compiles fully, and the correct info shows up in the HTML, but I get an error in VSCode.
src/boot/BackChat.js
import { boot } from 'quasar/wrappers';
const version = '0.0.0';
const backChat = {
version
};
export default boot(({ app, router, store }) => {
app.config.globalProperties.backChat = backChat;
});
Login.vue
// ...
<script>
import { ref } from 'vue';
export default {
data() {
return {
backChat: this.backChat
};
}
}
</script>
Am I using this interface wrong or is this just a bug with the Vue file validation? It seems it thinks "backChat" in Login.vue is a function. If I change the data() to mounted(), it is no longer a function, but then I cannot access it in the DOM. I am very new to Vue.
1 answers
Answer question0
I have a workaround which is the simplest approach. I am not sure if this is how your supposed to do it but, since it was thinking that it was a function, I just made the globalProperty a function that returns the object.
src/boot/BackChat.js
// ...
export default boot(({ app, router, store }) => {
app.config.globalProperties.$backChat = () => backChat;
});
Login.vue
// ...
data() {
return {
username,
password,
backChat: this.$backChat()
};
},
This fixes the error highlighted in the Vue file, and allows the same usage of the global object.