I am trying to upgrade my vue2 project to vue3. The app is running fine and also showing translations and loading the values from store correctly. The problem is ts is complaining about $t and $store when components are created using class syntax:
import { Component, Vue } from 'vue-facing-decorator';
@Component
export class TopBar extends Vue {
...
myMethod() {
this.$store.getters['session/abc']; // ERROR: Property '$store' does not exist on type 'TopBar'.ts-plugin(2339)
...
}
}
But it works fine for the normal vue syntax like
export default {
...
methods: {
myMethod() {
this.$store.getters['session/abc']; // NO ERROR
...
}
}
}
here is my shim.d.ts file
export {};
declare module 'vue' {
import { CompatVue } from 'vue';
const Vue: CompatVue;
export default Vue;
// eslint-disable-next-line vue/prefer-import-from-vue
export * from '@vue/runtime-dom';
const { configureCompat } = Vue;
export { configureCompat };
}