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?

Tega

I am not that experienced with Vue in combination with ts, but maybe you find some help in the TypeScript Vue Starter guide from MS. – Stopcock

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. – Monarchist

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... – Tega

What does your tsconfig look like? We use SFC vue files and ts files, and have had no issues. Likely a setup issue – Fanelli

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.

Allantois

Strange but it worked for vue 3! Had to add to jsconfig.json for javascript <script>s support. – Reign