Resolve "Property does not exist on type 'Vue'" error
I had the same problem but with exporting component. Some vs code snippets create template without necessary typo like this below
export default {
data() {
return {
x: "something",
};
},
methods: {
rename(name: string) {
this.x = name;
},
},
};
The problem was i did not add defineComponent()
to export default. So should be
import { defineComponent } from "vue";
export default defineComponent({
data() {
return {
x: "something",
};
},
methods: {
rename(name: string) {
this.x = name;
},
},
});
Make sure you exporting component with defineComponent() function
you should make a declare for import *.vue file.
such as:
vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Adding another answer to bring together several things you may need to fix.
Ensure you include the ".vue" extension in the filename being imported
While both
import Competency from '../components/competency';
and
import Competency from '../components/competency.vue';
may compile successfully, the second one will help avoid the error appearing in some IDE's such as VS Code.
Add a shim typings file
As @May pointed out above, you need a file that imports and re-exports the type of "Vue". In @May's answer, it is named vue-file-import.d.ts
, but elsewhere on the internet it is commonly called vue-shim.d.ts
. Regardless of name, the content needed is the same:
// vue-file-import.d.ts
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Try different locations for the shim file.
Originally I put it in /src
. I found this had an odd effect. Sometimes it worked, i.e. the VS Code error messages disappeared; and other times it didn't, they reappeared. This happened dynamically as I moved around the project editing different files.
I later found the suggestion for a shim file of identical content, but to be placed in /typings
. I tried this and it worked consistently. Other people seem quite happy with the /src
location.