The official vue docs suggest that you enable .vue file extension support in Typescript by including this sfc.d.ts file:
declare module "*.vue" {
import Vue from 'vue'
export default Vue
}
But adding this seems to conflict with the Vetur plugin. In my .vue components, the path / file checking for imports is completely disabled when I use the sfc.d.ts file
Also, changes in .vue files are not reflected in autocomplete anymore.
index.ts
// only works WITH the sfc.d.ts file
import App from './components/app.vue'
app.vue
<template></template>
<script lang="ts">
// import checking and code completion only works WITHOUT the sfc.d.ts file!
import Card from "./card.vue"
</script>
<style></style>
Is this a glitch in Vetur? How do I enable .vue file type in typescript without messing up the single-file-component code completion?
Please read the thread thoroughly.
https://github.com/vuejs/vetur/issues/423#issuecomment-340333844
@HerringtonDarkholme I have read the thread thoroughly.
I don't understand why this issue is closed. Vetur does not work when the below typescript declaration file is included in the project.
This means that Typescript cannot be used with Single File Components in Vue, which seems a major issue to me.
declare module "*.vue" {
import Vue from "vue";
export default Vue;
}
Agreed, this could be the reason behind the issue: https://github.com/vuejs/vetur/issues/606
Most helpful comment
@HerringtonDarkholme I have read the thread thoroughly.
I don't understand why this issue is closed. Vetur does not work when the below typescript declaration file is included in the project.
This means that Typescript cannot be used with Single File Components in Vue, which seems a major issue to me.