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?

I am not that experienced with Vue in combination with ts, but maybe you find some help in the [TypeScript Vue Starter guide](https://github.com/Microsoft/TypeScript-Vue-Starter) from MS. — David Artmann, Nov 15 '17 at 12:41
I'm experiencing the same exact thing. I either just ignore the error messages or restart VSCode if they start to bother me. Webpack still compiles everything fine, so I know the issue is with VSCode/Vetur and not with the code. — neilsimp1, Feb 28 '18 at 13:44
It's still not solved. Vetur cannot live detect changes in `.ts` files and in `types.d.ts` files! I posted an issue in Vetur's github but for some reason they marked it as solved... — Kokodoko, Feb 28 '18 at 15:02
What does your tsconfig look like? We use SFC vue files and ts files, and have had no issues. Likely a setup issue — Tim, Mar 12 '21 at 16:49

score 1 · Answer 1 · answered Feb 09 '22 at 03:42

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.

Intellisense not working for .vue files

1 Answers1