Intellisense not working for .vue files

Question

I am working with Vue and Typescript in Visual Studio Code and the Vetur extension. The problem: when I update any code, intellisense won't recognise the changes when working in a .vue file. In .ts files, intellisense IS working!

I use this definition file so that typescript recognises the .vue file extension:

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

Example

test.ts just changed

export default class Test {
    // testFunction() {}    // just removed this
    dummyFunction() {}      // added this
}

app.vue intellisense not working

In any .vue file, intellisense keeps suggesting testFunction and doesn't recognise dummyFunction:

import Test from "./test"
export default class App extends Vue {
    created() {
        const t = new Test()
        t.testFunction()        // allowed - but it doesn't exist
        t.dummyFunction()       // not allowed - but it does exist
    }
}

somefile.ts intellisense is working

In regular old .ts files, intellisense works.

import Test from "./test"
const t = new Test()
t.testFunction()        // here it works - this is not allowed
t.dummyFunction()       // here it works - this is allowed

If I close VS Code and reopen, then the new changes are updated. Is this a Vetur glitch? Do I need to alter my tsconfig or definition files?

Answer 1

I believe you need to add something like this to your tsconfig:

{
  "include": ["src/**/*.vue"]
}

From the docs: "If a glob pattern doesn’t include a file extension, then only files with supported extensions are included (e.g. .ts, .tsx, and .d.ts by default, with .js and .jsx if allowJs is set to true)."

I'm not sure how Vetur is behaving, but from a TS perspective, this should do the trick.